在jQuery上切换类

时间:2020-06-04 17:09:24

标签: javascript jquery toggle

如果单击不同的点击,如何打开和关闭班级?

我有两次单击,并且在单击时切换了一个类,但是如果我单击2,则没有1的类仍处于活动状态。

$('.show-15').on('click', function () {
    if (clicks < 0) {
        clicks = 0
    }
    $(this).toggleClass('active-post');
    cards.slice(clicks, cards.length).fadeOut();
    cards.slice(0, 15).fadeIn();
});

$('.show-25').on('click', function () {
    if (clicks < 0) {
        clicks = 0
    }
    $(this).toggleClass('active-post');
    cards.slice(clicks, cards.length).fadeOut();
    cards.slice(0, 25).fadeIn();
});

2 个答案:

答案 0 :(得分:2)

您可以这样做:

$('.show-15').on('click', function () {
    if (clicks < 0) {
        clicks = 0
    }
    $(".active-post").not(this).removeClass("active-post");
    $(this).toggleClass('active-post');
    cards.slice(clicks, cards.length).fadeOut();
    cards.slice(0, 15).fadeIn();
});

$('.show-25').on('click', function () {
    if (clicks < 0) {
        clicks = 0
    }
    $(".active-post").not(this).removeClass("active-post");
    $(this).toggleClass('active-post');
    cards.slice(clicks, cards.length).fadeOut();
    cards.slice(0, 25).fadeIn();
});

答案 1 :(得分:0)

您可以将toggle()事件用作

$(".show-15").toggle(
    function(){
        if (clicks < 0) {
            clicks = 0
        }
        $(this).toggleClass('active-post');
        cards.slice(clicks, cards.length).fadeOut();
        cards.slice(0, 15).fadeIn();},

        function(){
        if (clicks < 0) {
            clicks = 0
        }
        $(this).toggleClass('active-post');
        cards.slice(clicks, cards.length).fadeOut();
        cards.slice(0, 25).fadeIn(););
  });