Question

我写了一个切换类的函数。元素具有特定样式，当选择样式时，样式会发生变化。我想要它做的是当选择一个新元素时，所选元素上的样式将返回到原始样式。目前，当选择其他元素时，它仍然是新的风格。

有没有办法用我写的这个函数来完成这个？

<script>
    $('.stylingchange').click(function() {
        $(this).toggleClass('servicesiconchange');
    });
</script>

Answer 1

您只需要从每个具有.stylingchange类的元素中删除类，然后从当前元素切换。

＆＃13;

$('.stylingchange').click(function() {
             $('.stylingchange').removeClass('servicesiconchange');
            $(this).toggleClass('servicesiconchange');
        });

＆＃13;

检查我在JSFIDDLE

上创建的以下示例

Answer 2

$('.stylingchange').click(function(){
  $('.stylingchange.servicesiconchange').not(this).removeClass('.servicesiconchange');
  $(this).toggleClass('servicesiconchange');
})

首先检查具有不是当前项的切换样式类的任何元素并删除该类，然后切换当前项的类。

Answer 3

只需选择要删除的类的所有实例并使用removeClass()，然后在单击的元素上切换类。

$('.stylingchange').on('click', function(){
    $('.servicesiconchange').removeClass('servicesiconchange');
    $(this).toggleClass('servicesiconchange');
});

或者，如果您需要将其限制为某个类，则可以执行此操作

$('.stylingchange').on('click', function(){
    $('.stylingchange.servicesiconchange').removeClass('servicesiconchange');
    $(this).toggleClass('servicesiconchange');
});

选择新元素时，jQuery将关闭类切换

3 个答案: