Question

分页功能：如果用户点击数组中的任何元素，我想更改背景颜色。我可以使用下面的代码实现这一点，但是当我单击此数组中的其他元素时，我希望以前单击的元素和其余元素使用原始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');
    });
})

Answer 1

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

您正在使用jQuery，因此请勿使用document.getElementsByClassName('pagins')。只需使用$('.pagins')。

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

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

Answer 2

从所有元素中删除testClass，然后将其添加到所选元素。

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

Answer 3

稍微简化你的代码你可以做到这一点 -

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

由于提供类选择器会将click函数应用于该类的所有元素。

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

3 个答案: