为特定div设置背景颜色的最佳方法
考虑我有一万个div,默认背景颜色为灰色,但是当我点击特定的div时,背景颜色应该变为绿色。为特定div设置背景颜色的最佳方法
只需5元我试图
<div id='1'>1</div>
<div id='2'>2</div>
<div id='3'>3</div>
<div id='4'>4</div>
<div id='5'>5</div>
JS:
$('div').each(function(i, j){
console.log(j);
$(j).click(function(index, ele){
$('div').css({'background-color': 'grey'});
$('div#'+index.currentTarget.id).css({'background-color': 'green'});
});
});
这是工作,但如果有说像10000个的div,性能将是一个问题,我想要一个更好的方法。
您可以简化代码很多:
var currentTargetId = 0;
$('div').click(function(){
$("#"+currentTargetId).css({'background-color': 'grey'});
$(this).css({'background-color': 'green'});
currentTargetId = $(this).attr("id");
});
演示小提琴:
var div = $('div'); // cache for performance
div.on('click', function() {
div.css('backgroundColor', 'grey');
this.style.backgroundColor = 'green'; // use pure JS instead of wrapping it again for performance
});
嘿,我们可以使用event.bubbles来做同样的事情吗?因为对于一万个div,它会是性能问题,为所有这些div绑定click事件?如果您知道event.bubbles,能否请您演示我也是一样的演示。 – 2014-09-09 04:57:41
如果我理解正确: '$(document).on('click','div',function(){/ * ... * /});'' – 2014-09-09 09:57:32
这里是你想要的东西:
$('div').click(function(){
$('div').css({'background-color': 'grey'});
$(this).css({'background-color': 'green'});
});
没有理由遍历所有元素,并在它们上设置一个独立的事件侦听器。
我想补充一定的阶级这些div的从你的页面上的其他div的区分它们,你将可能有,像clickable
例如
<div class="clickable" id="1">1</div>
<div class="clickable" id="2">2</div>
<div class="clickable" id="3">3</div>
现在你可以使用一个简单的选择。
var clickableElements = $('.clickable');
clickableElements.on('click', function(){
// in this scope, "this" will refer to the clicked element
clickableElements.css({'background-color': 'grey'});
$(this).css({'background-color': 'green'});
});
存放在变量选择呼叫(clickableElements
)是有用的,因为你没有在DOM
另一件事我会在这里劝告产品总数再次选择元素使用类实际的样式,在我看来,它更易于维护,并且可以从实际样式中分离出js逻辑,因为您可以轻松地在CSS中指定,修改和扩展它们。
CSS:
.active-element{
background: green;
}
.inactive-element{
background: grey;
}
的点击处理程序将更改为以下,则:
clickableElements.on('click', function(){
clickableElements.removeClass('active-element').addClass('inactive-element');
$(this).removeClass('inactive-element').addClass('active-element');
});
CSS
<style>
div{ background-color:#f5f5f5;}
.selected{ background-color:#f00;}
</style>
脚本
<script type="text/javascript">
$(document).ready(function(){
$('div').on('click',function() {
$('div').removeClass('selected');
$(this).addClass('selected')
});
});
</script>
的Html
<div id='1'>1</div>
<div id='2'>2</div>
<div id='3'>3</div>
<div id='4'>4</div>
<div id='5'>5</div>
使用纯JavaScript必须解决这个最快方式。
var div = document.getElementsByTagName('div');
var size = div.length;
function changeColor(){
this.style.backgroundColor = '#27f'; // or any color
}
for(var i = 0; i < size; i++){
div[i].onclick = changeColor;
}
这里Fiddle
你的ID是错的,ID属性必须始终以字母开头。 – Ahmad 2014-08-27 12:01:05
@Ahmad:不,在HTML5中他们没有。 – CBroe 2014-08-27 12:05:58
@CBroe yep,仍然另一种方式验证HTML5和以前的版本 – Ahmad 2014-08-27 12:07:10