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

没有理由循环遍历所有元素并在它们上设置单独的事件监听器。

我会在这些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-logic，因为您可以在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 2

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

Answer 3

这是你想要的：

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

Answer 4

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 5

您可以大量简化代码：

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 6

也许你可以尝试这样的事情：

var currentTargetId = 0;

$('div').click(function(){
        $("#"+currentTargetId).css({'background-color': 'grey'});
        $(this).css({'background-color': 'green'});
       currentTargetId = $(this).attr("id");

});

演示小提琴：http://jsfiddle.net/lparcerisa/5ts2k1g7/

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

6 个答案: