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

【问题标题】：Best Way to set background color for a particular div为特定 div 设置背景颜色的最佳方法
【发布时间】：2014-08-27 11:56:01
【问题描述】：

假设我有一万个 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 之类的说法，性能将是一个问题，我想要一个更好的方法。

【问题讨论】：

你的 id 错误，ID 属性必须始终以字母开头。
@Ahmad：不，在 HTML5 中不会。
@CBroe 是的，仍然以另一种方式验证 HTML5 和以前的版本
@Ahmad：它是否验证为旧版本并不重要——这就是为什么你指定你通过doctype使用哪个HTML版本声明。

标签： javascript jquery html performance

【解决方案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 逻辑与实际样式分开，因为您可以在 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');
});

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

这是你想要的：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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
});

【讨论】：

嘿，我们可以用event.bubbles做同样的事情吗，因为对于一万个div，这将是性能问题，为所有这些div绑定点击事件？，如果你知道这个事件.bubbles，你能给我看看同样的演示吗？
如果我理解正确：$(document).on('click', 'div', function() { /* ... */ });

【解决方案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/

【讨论】：