为特定div设置背景颜色的最佳方法

Question

考虑我有一万个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'}); 

    }); 
}); 

Fiddle

这是工作，但如果有说像10000个的div，性能将是一个问题，我想要一个更好的方法。

Answer 1

您可以简化代码很多：

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 
}); 

Answer 2

这里是你想要的东西：

$('div').click(function(){ 
    $('div').css({'background-color': 'grey'}); 
    $(this).css({'background-color': 'green'}); 
}); 

Answer 3

也许你可以用这样的尝试：http://jsfiddle.net/lparcerisa/5ts2k1g7/

Answer 4

没有理由遍历所有元素，并在它们上设置一个独立的事件侦听器。

我想补充一定的阶级这些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'); 
}); 

Answer 5

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> 

Answer 6

使用纯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