我正在尝试使用嵌套 div 和基本 jQuery 编写这首诗。我的想法是从一个 .active 类的 div 开始,该 div 具有 display: block,所有其他 div 都是第一个 div 的子元素,
我正在尝试使用嵌套 div 和基本 jQuery 编写这首诗。我的想法是从一个 .active
具有 的类的 display: block
,所有其他 div
都是第一个具有 的 的子级 div
。 display: none
现在,当您单击第一个 时 div
,它会从自身中删除类 .active
(向自身添加 .static
现在仅改变颜色的类)并添加 .active
到其子级。实际上,子级 div
变得可见。然后您单击该子级以显示其子级,依此类推,直到诗歌结束:
$(".active").click(function() {
$(this).removeClass("active").addClass("static");
$(this).children("div").addClass("active")
});
脚本加载时,DOM 中 .active
仅存在第一个 div 的类 https://jsfiddle.net/4ygfrtgb/1/
我尝试过这样的事件委托:
$("div").on("click", ".active", function() {
$(this).removeClass("active").addClass("static");
$(this).children("div").addClass("active");
});
但是,即使是第一个元素 div
对点击也没有反应。我知道委托对元素的子元素起作用,而我试图调用同一元素的类。
那么有没有办法通过在 DOM 加载后添加的类来定位元素?
非常感谢。
您没有正确执行事件委托... 在此处 .
在事件委托中,您将点击处理程序附加到父元素,并添加目标子元素选择器以响应该事件。 在本例中,您将它附加到目标元素本身。
将点击处理程序附加到第一个元素的父元素 div
(您可能希望更具体,而不是使用 body
)。
$("body").on("click", "div.active", function() {
$(this).removeClass("active").addClass("static");
$(this).children("div").addClass("active");
});
更新了 JSFiddle 以显示其有效: https://jsfiddle.net/4ygfrtgb/2/ .