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");
  });

});

这是一个完整的演示：

＆＃13;

$(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");
	  
  });

})

＆＃13;

.messageCaseAnimation {
  background-color: red;
}

＆＃13;

<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>

＆＃13;

如何修改类的一个元素而不用其他CSS类来打扰其余的元素？

1 个答案: