爲特定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