jQuery-在添加类之后检查div是否没有类_Jquery_Addclass_Removeclass

jQuery-在添加类之后检查div是否没有类

jquery

jQuery-在添加类之后检查div是否没有类,jquery,addclass,removeclass,Jquery,Addclass,Removeclass,如果在添加类之后没有特定类，我想jquery检查div：这是我的添加类代码： $('#Test').each(function (e) { $(this).click(function () { $(this).addClass('Rotate'); }); 然后，我想检查#Test div是否没有。Rotate类： $('#Test').not('.Rotate').mouseenter(function () { $('#Test').re

如果在添加类之后没有特定类，我想jquery检查div：

这是我的添加类代码：

$('#Test').each(function (e) {
    $(this).click(function () {
        $(this).addClass('Rotate');
    });

然后，我想检查#Test div是否没有。Rotate类：

$('#Test').not('.Rotate').mouseenter(function () {
        $('#Test').removeClass('Rotate');
    });

但是这不起作用。

假设您使用的是类而不是

id

s（因为在文档中），听起来您想在单击元素时将

Rotate

类添加到元素中，并在这些元素收到

mouseenter

时将其删除

委托处理可能是您最好的选择：

// Clicking on a .Test that isn't a .Rotate adds .Rotate
$("body").on("click", ".Test:not(.Rotate)", function() {
  $(this).addClass("Rotate");
});

// mouseenter on a .Test.Rotate removes the .Rotate
$("body").on("mouseenter", ".Test.Rotate", function() {
  $(this).removeClass("Rotate");
});

它实际上钩住

主体

元素上的事件，但仅当事件通过与给定选择器匹配的元素时才会激发它们。这对于添加/删除元素或添加/删除用于确定是否挂接事件的对象（如

Rotate

类）非常有用。由于测试是在事件发生时进行的，因此（在我下面的示例中）没有任何元素最初与选择器匹配并不重要；以后会有，这才是关键

完整示例：


委派
.轮换{
颜色：绿色；
}
单击可变为绿色（“.Rotate”），鼠标输入绿色可将其删除
一
二
三
四
//单击不是.Rotate的.Test可添加.Rotate
$（“body”）。在（”单击“，”上。测试：不（.Rotate）”，函数（）{
$（此）.addClass（“旋转”）；
});
//.Test.Rotate上的鼠标指针将删除.Rotate
$（“body”）.on（“mouseenter”，“.Test.Rotate”，函数（）{
$（此）.removeClass（“旋转”）；
});

只是一个注释。。。ID在页面上应该是唯一的。您不应该使用。Id上的每个元素都可以共享目标html…看起来您可能有多个Id为

Test

的元素，但是如果您确实希望在匹配集中的每个元素上连接

单击处理程序，则Id选择器将仅返回带有所述Id的第一个元素，您不需要使用每个。上面的代码相当于$（'#Test'）。单击（function（）{$（this）.addClass（'Rotate'）；}）这是我的错误，对不起，伙计们的身份证问题，这是一个简单的错误。请阅读以下内容：感谢您的回复，但看起来我无法正确描述我的问题，请看，您看到，当您单击每个圆时，它们将旋转，然后如果您将鼠标移到每个圆上，它们将停止旋转，但主要问题是：我只想在其他圆上停止旋转，而不是当前（或目标）圆，我的意思是当你们把鼠标放在当前旋转的圆上时，它不会影响，若你们把鼠标放在另一个圆上，它就会停止旋转@Arunpjohny感谢您的回复，但看起来我无法正确描述我的问题，请看，您看到，当您单击每个圆时，它们将旋转，然后如果您将鼠标移到每个圆上，它们将停止旋转，但主要问题是：我只想在另一个圆上停止鼠标旋转，而不是当前（或目标）圆，我的意思是当你们把鼠标放在当前旋转的圆上时，它不会影响，若你们把鼠标放在另一个圆上，它就会停止旋转。（抱歉英语不好）@T.J.克劳德
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset=utf-8 />
<title>Delegated</title>
  <style>
    .Rotate {
      color: green;
    }
  </style>
</head>
<body>
  <p>Click to turn green ('.Rotate'), mouseenter a green one to remove it</p>
  <div class="Test">one</div>
  <div class="Test">two</div>
  <div class="Test">three</div>
  <div class="Test">four</div>
  <script>
    // Clicking on a .Test that isn't a .Rotate adds .Rotate
    $("body").on("click", ".Test:not(.Rotate)", function() {
      $(this).addClass("Rotate");
    });

    // mouseenter on a .Test.Rotate removes the .Rotate
    $("body").on("mouseenter", ".Test.Rotate", function() {
      $(this).removeClass("Rotate");
    });
  </script>
</body>
</html>