更改数组中的背景颜色元素答案

【问题标题】：Change background color elements in the array更改数组中的背景颜色元素
【发布时间】：2015-08-27 22:12:07
【问题描述】：

分页功能：如果用户单击数组中的任何元素，我想更改背景颜色。我可以使用下面的代码来实现这一点，但是当我单击此数组中的其他元素时，我希望先前单击的元素和其余元素使用原始 pagins 类。有人能指点我的方向吗？

.pagins a {
 color: #fff;
 background-color:#009de0;
}

.testClass {
 background-color:#fff !important;
 color:#009de0 !important;
}

var elements = document.getElementsByClassName('pagins');
$.each(elements, function(){
    $(elements).click(function(){
        $(this).addClass('testClass');
    });
})

【问题讨论】：

请注意，您应该删除$.each 调用。您的 each 循环毫无意义。 jQuery click 方法本身会遍历集合。您目前正在为每个没有意义的元素绑定多个点击处理程序！

标签： javascript jquery css arrays

【解决方案1】：

不要使用$.each()，这是 jQuery 中的一种循环方式。每次点击都会多次调用点击处理程序。

你正在使用 jQuery，所以不要使用document.getElementsByClassName('pagins')。只需使用$('.pagins')。

听起来您只希望最近点击的.pagins 元素具有testClass 类。因此，在将类添加到单击的元素之前，请从所有 .pagins.testClass 元素中删除该类。

$('.pagins').click(function(){
    $('.pagins.testClass').removeClass('testClass');
    $(this).addClass('testClass');
});

【讨论】：

【解决方案2】：

在将testClass 添加到选定元素之前，从所有元素中删除它。

  $.each(elements, function(){
        $(elements).click(function() {
            $(elements).removeClass('testClass');      
            $(this).addClass('testClass');                                          
        });
    });

【讨论】：

【解决方案3】：

var elements = document.getElementsByClassName('pagins');
$.each(elements, function(){
    $(elements).click(function(){
        $.each(elements, function() {$(this).removeClass('testClass')});
        $(this).addClass('testClass');                                          
    });
})

【讨论】：

【解决方案4】：

你可以稍微简化一下你的代码 -

$(".testClass").removeClass("testClass");
$(".pagins").click(function() {
    $(this).addClass('testClass');
});

提供类选择器会将点击功能应用于该类的所有元素。

【讨论】：