Javascript 为特定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>

这是可行的，但如果有10000个div，性能将是一个问题，我需要一个更好的方法。

以下是您想要的：

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

以下是您想要的：

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

---

您可以大大简化代码：

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

---

您可以大大简化代码：

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

---

也许你可以试试这样的方法：

var currentTargetId = 0;

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

});

---

演示小提琴：

也许你可以试试这样的东西：

var currentTargetId = 0;

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

});

---

演示小提琴：

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

我会在这些div中添加一个特定的类，以便将它们与页面上可能有的其他div区分开来，比如clickable

<div class="clickable" id="1">1</div>
<div class="clickable" id="2">2</div>
<div class="clickable" id="3">3</div>

将选择器调用存储在变量clickableElements中非常有用，因为您不必再次在DOM中一起选择元素

这里我建议的另一件事是使用类进行实际的样式设计，我认为它更易于维护，并且将js逻辑与实际的样式设计分开，因为您可以轻松地在CSS中指定、修改和扩展它们

CSS:

单击处理程序将更改为以下内容：

clickableElements.on('click', function(){

     clickableElements.removeClass('active-element').addClass('inactive-element');
     $(this).removeClass('inactive-element').addClass('active-element');
});

---

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

我会在这些div中添加一个特定的类，以便将它们与页面上可能有的其他div区分开来，比如clickable

<div class="clickable" id="1">1</div>
<div class="clickable" id="2">2</div>
<div class="clickable" id="3">3</div>

将选择器调用存储在变量clickableElements中非常有用，因为您不必再次在DOM中一起选择元素

这里我建议的另一件事是使用类进行实际的样式设计，我认为它更易于维护，并且将js逻辑与实际的样式设计分开，因为您可以轻松地在CSS中指定、修改和扩展它们

CSS:

单击处理程序将更改为以下内容：

clickableElements.on('click', function(){

     clickableElements.removeClass('active-element').addClass('inactive-element');
     $(this).removeClass('inactive-element').addClass('active-element');
});

css

剧本

<script type="text/javascript">
    $( document ).ready( function(){
        $('div').on('click',function () {
             $('div').removeClass('selected');
             $(this).addClass('selected')
        });
    });
    </script>

Html

css

剧本

<script type="text/javascript">
    $( document ).ready( function(){
        $('div').on('click',function () {
             $('div').removeClass('selected');
             $(this).addClass('selected')
        });
    });
    </script>

Html

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

在这里，使用纯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;
}

---

这里的

您的ID是错误的，ID属性必须始终以字母开头。@Ahmad:不，在HTML5中它们不以字母开头。@CBroe-yes，但另一种方式验证HTML5和以前的版本versions@Ahmad：它是否作为旧版本进行验证并不重要–这就是为什么您通过doctype声明指定使用哪个HTML版本。您的ID是错误的，ID属性必须始终以字母开头。@Ahmad:不，在HTML5中它们不以字母开头。@CBroe yep，但另一种方式验证HTML5和以前的版本versions@Ahmad：它是否作为旧版本进行验证并不重要–这就是为什么您通过doctype声明指定使用哪个HTML版本。嘿，我们可以使用event.bubbles进行同样的验证吗，因为对于一万个div，这将是性能问题，要为所有这些div绑定click事件，如果您知道event.bubbles，请向我展示相同的演示。如果我理解正确：$document.on'click'，div'，函数{/*…*/}；嘿，我们可以用event.bubbles做同样的事情吗？因为对于一万个div，绑定所有那些div的click事件将是性能问题吗？如果你知道event.bubbles，你能给我看一下同样的演示吗？如果我理解正确：$document.on'click'，'div'，function{/*…*/}；