javascript - 如何修改类的一个元素而不用相同的 CSS 类打扰其余元素？

Question

我正在尝试选择一个 messageCase 实例并将其展开。这是我目前拥有的 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");
        }
    });

});

谢谢!

Answer 1

在您的 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>