如何修改类的一个元素，而不会用同一个 CSS 类打扰其余元素

How to modify one element of a class without bothering the rest with the same CSS class?

本文关键字：元素 同一个 CSS 打扰 余元素 何修改 一个 修改      更新时间：2023-09-26

我正在尝试选择消息案例的一个实例并将其展开。这是我到目前为止拥有的jquery和javascript。现在，这会更改 messageCase 的每个实例并添加我想要的动画属性。我怎样才能做到这一点，这样就不会发生在 messageCase 的所有实例上？

我也在"使用严格"; 条件。

$(document).ready(function () {
    var aTag = $("div.messageCase").id();
    var divTarget = $("div.messageCase")
    $(document).click(function (e) {
        var target = $(e.target);
        if (target.is(aTag)) {
            if (divTarget.hasClass("messageCase")) {
                // divTarget.removeClass("messageCase");
                divTarget.addClass("messageCase messageCaseAnimation");
            }
        } else {
            divTarget.addClass("messageCase");
        }
        if (!target.is(divTarget))
        {
            $(divTarget).removeClass("B");
        }
    });
});

谢谢！

在click方法中，您将单击的元素分配给target，因此看起来您可以执行以下操作：

target.addClass("messageCase messageCaseAnimation");

下面是代码的简化示例：

$(document).ready(function() {
  var divTarget = $("div.messageCase")
  $(document).click(function(e) {
    var target = $(e.target);
    target.addClass("messageCase messageCaseAnimation");
  });
});

这是一个完整的演示：

$(document).ready(function() {
  var divTarget = $("div.messageCase")
  $(document).click(function(e) {
    var target = $(e.target);
    // Remove the messageCaseAnimation from all
    divTarget.removeClass('messageCaseAnimation');
    
    // Add the messageCaseAnimation to only the clicked
    target.addClass("messageCaseAnimation");
	  
  });
})
.messageCaseAnimation {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messageCase">
  Case 1
</div>
<div class="messageCase">
  Case 2
</div>
<div class="messageCase">
  Case 3
</div>
<div class="messageCase">
  Case 4
</div>

相关文章：