Question

我正在尝试自学JQuery，并遇到了我认为是一个非常基本的问题。我最终想要的是在单击时更改样式的文本，在两个类之间来回切换。上半部分工作正常 - 当我第一次点击跨度时，新类被分配。但是当我第二次点击时没有任何反应。我假设这是因为JQuery选择器恰好一次将点击处理程序应用于当时与选择器匹配的元素。如何修改我的代码，以便分配给特定类的单击处理程序将应用于具有该类的所有元素，而不管它们何时获得该类？

documentation

<html>
<head>
    <title>My JQuery Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $(".spoiler").click(function() {
                this.className = "revealed";
            });
            $(".revealed").click(function() {
                this.className = "spoiler";
            });
        })

    </script>
    <style type="text/css">
        .spoiler {
            color: black;
            background-color: black;
            cursor:pointer
        }
        .revealed {
            color: red;
            background-color:white;
            cursor:pointer
        }
    </style>
</head>
<body>
    <h1>Caution, spoilers ahead</h1>

    <p>At the end of <em>Soilent Green</em>, the main character reveals in dramatic fashion that "<span class="spoiler">Soilent Green is people!</span>"</p>

</body>
</html>

Answer 1

这是事件委派的经典用例，你将事件挂钩到容器元素上（因为click气泡），然后告诉jQuery只触发你的处理程序事件遍历与给定选择器匹配的元素。点击发生时检查完成，因此更新类无缝地发生：

$(document).ready(function () {
    $(document.body).on("click", ".spoiler", function() {
        this.className = "revealed";
    });
    $(document.body).on("click", ".revealed", function() {
        this.className = "spoiler";
    });
})

在该代码中，我使用的容器是页面主体，但通常有一个容器更接近您可以使用的相关元素。

更多the documentation for on。

另请注意，您可以通过toggleClass进一步简化这一过程，$(document).ready(function () { $(document.body).on("click", ".spoiler, .revealed", function() { $(this).toggleClass("spoiler revealed"); }); })根据类是否已存在来添加或删除类，并接受多个类名：

ready

附注：如果您将脚本标记放在HTML的末尾，就在结束</body>标记之前，通常best practice，则不需要使用$(document).ready(function () { $(document).on("click",".spoiler",function() { this.className = "revealed"; }); $(document).on("click",".revealed",function() { this.className = "spoiler"; }); });除非有充分理由做其他事情。

Answer 2

您必须在此背景下使用event-delegation，

{{1}}

DEMO

基于选择器，事件将在开头只绑定一次。不会触发事件处理程序取决于单击调用期间DOM中可用的元素集。如果您想以您想要的方式进行，那么您必须使用事件委派。

Answer 3

是的，你需要使用'on click'事件来使用事件委托对于您的信息，委托事件与直接事件不同。

提供选择器时，事件处理程序称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）。 jQuery将事件从事件目标起泡到附加处理程序的元素（即最里面到最外层的元素），并为该路径上与选择器匹配的任何元素运行处理程序。

每当元素获得该类时，基于类附加单击处理程序

3 个答案:

DEMO