Question

我一直试图通过制作这个简单的脚本来理解toggleClass函数，但它没有像我预期的那样工作。

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style type="text/css">
        body {
            font-family: "Kozuka Gothic Pro";
        }

        .red {
            background: red;
        }

        .blue {
            background: blue;
        }

        div {
            width: 200px;
            height: 200px;
        }

    </style>
</head>

<body>
    <div class="blue"></div>

    <script>
        $("div").click(function() {
            $(this).toggleClass("red");
        });
    </script>
</body>

但是，如果我将div类更改为红色并将toggleClass参数更改为“blue”它可以工作，有人可以解释一下吗？我希望收到你的来信。提前谢谢！

Answer 1

你需要在toggleClass函数中添加蓝色和红色类来改变它们，比如

$("div").click(function() {
     $(this).toggleClass("red blue");
});

$("div").click(function() {
  $(this).toggleClass("red blue");
});

body {
            font-family: "Kozuka Gothic Pro";
        }

        .red {
            background: red;
        }

        .blue {
            background: blue;
        }

        div {
            width: 200px;
            height: 200px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue"></div>

当您在togleclass函数中仅使用红色时会发生什么情况然后它会应用但由于蓝色类和蓝色背景显示原因，更改不会覆盖。因此，如果您希望代码能够正常运行，那么在这种情况下，您需要在!important中使用red-background，

.red {
    background: red !important;
}

$("div").click(function() {
  $(this).toggleClass("red");
});

body {
            font-family: "Kozuka Gothic Pro";
        }

        .red {
            background: red !important;
        }

        .blue {
            background: blue;
        }

        div {
            width: 200px;
            height: 200px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue"></div>

请注意，我只是告知您（通过第二种选择）为什么您的代码无效。你必须选择我的第一个选择。

Answer 2

$("div").click(function() {
            
            $(this).toggleClass("red");
            $(this).toggleClass("blue");
        });

 body {
            font-family: "Kozuka Gothic Pro";
        }

        .red {
            background: red;
        }

        .blue {
            background: blue;
        }

        div {
            width: 200px;
            height: 200px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="blue"></div>

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

        $(this).toggleClass("red");
        $(this).toggleClass("blue");
    });

Answer 3

试试这个：传递红色和蓝色类，如果存在则将删除，如果不存在则添加。所以第一次它会添加红色但会删除蓝色。

$("div").click(function() {
        $(this).toggleClass("red blue");
    });

Answer 4

toggleClass()方法在添加和删除所选元素中的一个或多个类名之间切换。

此方法检查每个元素是否有指定的类名。如果丢失则添加类名，如果已设置则删除 - 这将创建切换效果。

下面的说明

它充当 - if div have class "red" then REMOVE class "red" else ADD "red" class from div

Answer 5

问题出现是由于css样式的顺序，因为最后的css样式会影响输出，所以最后声明类 blue 上的css，所以 blue 类优先于 red 类。

所以，要解决这个问题，你应该尝试在div上只有一个类，这样css的顺序就不重要了。

$("div").click(function() {
    $(this).toggleClass("red blue");
});

Answer 6

如果将类分配给元素，则toggleClass（）将删除该类，或者如果未将该类分配给该元素，则将添加该类。试试这个片段作为演示：

＆＃13;

$(document).ready(function() {
  $("div").click(function() {
    if ($(this).hasClass("red")) {
      alert("I am red! I'm turning red off.");
      $(this).toggleClass("red");
    } else if ($(this).hasClass("blue")) {
      alert("I am blue! I'm turning blue off.");
      $(this).toggleClass("blue");
    } else {
      alert("I am blank! Turning red on.");
      $(this).toggleClass("red");
    }
  });
});

＆＃13;

    body {
      font-family: "Kozuka Gothic Pro";
    }
    .red {
      background: red;
    }
    .blue {
      background: blue;
    }
    div {
      width: 200px;
      height: 200px;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="blue"></div>

＆＃13;

jQuery toggleClass不会切换类

6 个答案: