javascript - 基于点击功能的toggleClass

Question

我有兴趣根据点击的内容更改 toggleClass。

我希望类依赖于上一次点击页面。

因此，如果我点击字母“A” - 在这种情况下，它将使正方形变为红色。单击正方形后，我希望 .toggleClass 为 .darkred

当我点击字母“B”时 - 我希望 .toggleClass 为 .darkblue

我怎样才能使它动态化以便它知道将哪个类添加到 toggleClass

<script>
$("li.alpha").click(function(){
    $(".color").addClass("red").removeClass("blue").removeClass("orange");
});
$("li.bravo").click(function(){
    $(".color").addClass("blue").removeClass("red").removeClass("orange");
});
$("li.charlie").click(function(){
    $(".color").addClass("orange").removeClass("blue").removeClass("red");
});
</script>
<script>
    $(".color").on("mousedown mouseup", function(e)
{
    $(".color").toggleClass("darkblue");  // I want this class to be dynamic. It should be based on what I clicked on. so in this case I would have clicked on li.bravo
});
</script>

我希望在 .toggleClass 中添加的类是动态的，并且基于我正在添加的类。

红色 = .darkred

蓝色 = .darkblue

橙色 = .darkorange。

https://jsfiddle.net/hp6e0w3z/

Answer 1

试试这个。

<script>
    $("li.alpha").click(function(){
        $(".color").addClass("red").removeClass("blue").removeClass("orange");
    });
    $("li.bravo").click(function(){
        $(".color").addClass("blue").removeClass("red").removeClass("orange");
    });
    $("li.charlie").click(function(){
        $(".color").addClass("orange").removeClass("blue").removeClass("red");
    });

    $(".color").click(function(e) {
        var color = $(this).className;
        $(".color").toggleClass('dark' + color);
    });
</script>

我还建议使用 className 删除所有其他类。

<script>
    $("li.alpha").click(function(){
        $(".color").get(0).className = '';
        $(".color").addClass("red");
    });
    $("li.bravo").click(function(){
        $(".color").get(0).className = '';
        $(".color").addClass("blue");
    });
    $("li.charlie").click(function(){
        $(".color").get(0).className = '';
        $(".color").addClass("orange");
    });

    $(".color").click(function(e) {
        var color = $(this).className;
        $(".color").toggleClass('dark' + color);
    });
</script>

$(".color").get(0).className = ''; 这将从元素中删除所有类。

让代码更短

<script>
    $("li").click(function(){
        if($(this).hasClass('alpha')) $(".color")[0].className = 'red';
        if($(this).hasClass('bravo')) $(".color")[0].className = 'blue';
        if($(this).hasClass('charlie')) $(".color")[0].className = 'orange';
    );

    $(".color").click(function(e) {
        $(".color").toggleClass('dark' +  $(this).className);
    });
</script>