Question

<script type="text/javascript">
$(document).ready(function(){
        $("input").click(function(){
             $(".ABC").toggleClass("else");
        });

});
</script>


<body>
    <p class="ABC">hahahahhaha</p>
    <input type="button" value="click" />
</body>

运行上面的代码，的类将通过按钮点击在“ABC else”和“ABC”之间切换。

例如：

第一次点击：成为

第二次点击：变为

但是，我希望在“ABC”和“ABCelse”（ABC和ELSE之间没有空格）之间切换类名。有没有办法解决这个问题？提前谢谢。

Answer 1

您可以执行以下操作，将ABC类与ABCelse分开切换。

$(this).find(".ABC").toggleClass("ABC").toggleClass("ABCelse");

Answer 2

首先，它们之间存在空格的原因是因为.toggle（）将类'else'添加到div中。所以它现在有两个类：.ABC＆amp;的.else

你想要做的是实际删除类.ABC并添加类.ABCelse，或删除类.ABCelse并添加类.ABC：

$('button').click(function(){
    $(this).find('.ABC').removeClass('ABC').addClass('ABCelse');
    $(this).find('.ABCelse').removeClass('ABCelse').addClass('ABC');
});

Answer 3

$(":button").click(function(){

    $("div").toggleClass(function(){

        if($(this).is(".ABC")){return "else";}
        else if($(this).is(".else")){return "ABC";}

    });
});

这里是小提琴http://jsfiddle.net/DgAPR/

Jquery Toggle Class没有分隔类名

3 个答案: