Question

我正在尝试制作一个过滤器，如果在过滤器上点击了一个标签我需要删除一个类并添加另一个，如果我点击相同的按钮我想删除该类并重新添加旧类

到目前为止它可以在点击时更改颜色，但是当我添加用于将标签更改回正常样式的代码时，它会在第一次单击后立即更改回正常样式。

html示例代码（也使用php自动生成）

<label class="btn btn-default">
    <input type="checkbox" class="tagfilter" style="border:1px solid #520a76;padding:6px; display:none;" data-id="1" value="tag1" /> tag1   
</label>
<label class="btn btn-default">
    <input type="checkbox" class="tagfilter" style="border:1px solid #520a76;padding:6px; display:none;" data-id="2" value="tag2" /> tag2
</label>
<label class="btn btn-default">
    <input type="checkbox" class="tagfilter" style="border:1px solid #520a76;padding:6px; display:none;" data-id="3" value="tag3" /> tag3
</label>

jQuery代码：

$('.tag-btn').click(function(){

    if($(this).hasClass('btn-default')){
        alert(1);
        $(this).removeClass('btn-default').addClass('btn-shop-color');
    }

    if($(this).hasClass('btn-shop-color')){
        alert(2);
        $(this).removeClass('btn-shop-color').addClass('btn-default');
    }
});

Answer 1

只需使用jQuery提供的toggleClass()函数：

$('.tag-btn').click(function(){
    $(this).toggleClass('btn-default btn-shop-color');
});

Answer 2

你需要在第一个if，o.w。如果被触发

if($(this).hasClass('btn-default')){
    $(this).removeClass('btn-default').addClass('btn-shop-color');
    return;
}

Answer 3

$('.btn').click(function() {

  $(this).toggleClass('btn-default btn-shop-color')
});

.btn-default {
  color: red
}
.btn-shop-color {
  color: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="btn btn-default">qwe
</label>

使用.toggleClass()

使用jQuery单击标签时如何添加和删除类？

3 个答案: