8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

jQuery:如何使用添加到嵌套 div 的类的事件委托?

lxop 2月前

41 0

我正在尝试使用嵌套 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 加载后添加的类来定位元素?

非常感谢你。

帖子版权声明 1、本帖标题:jQuery:如何使用添加到嵌套 div 的类的事件委托?
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由lxop在本站《jquery》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 您没有正确执行事件委托... 在此处 .

    在事件委托中,您将点击处理程序附加到父元素,并添加目标子元素选择器以响应该事件。 在本例中,您将它附加到目标元素本身。

    将点击处理程序附加到第一个元素的父元素 div (您可能希望更具体,而不是使用 body )。

    $("body").on("click", "div.active", function() {
      $(this).removeClass("active").addClass("static");
      $(this).children("div").addClass("active");
    });
    

    更新了 JSFiddle 以显示其有效: https://jsfiddle.net/4ygfrtgb/2/ .

  • 确实有效!我将所有内容放入 #wrapper div 中,以避免 body 上发生事件。我可以再次利用您的专业知识吗?我的第二个想法是能够通过单击 .static 从任何级别折叠诗歌,这将从单击的 div 的所有子级中删除任何可见类。我又把它弄坏了:jsfiddle.net/4ygfrtgb/3 为什么?我不能将两个不同的事件委托给同一父级内的两个不同类吗?非常感谢!

  • 可以,但它们可能会互相干扰,因此您必须使用 event.stopPropagation() 来阻止事件传播到父元素。已再次修复 JSFiddle 以满足您的下一个要求:jsfiddle.net/yangshun/4ygfrtgb/4

  • 你是最棒的!!!:D 非常感谢!我记得那门课上的 stopPropagation(),tryjQuery,但我想,我什么时候需要用到它?现在我们在这里……我的 jQuery 教育开始慢慢地有了进展。我会阅读冒泡和捕获。再次感谢!

  • 不客气!^_^ 我的建议是不要对诗歌的后续行使用父子关系。兄弟关系会更好(而且您不必添加任何代码来阻止事件传播)。子诗行目前也随着深度的增加而缩进,兄弟关系会阻止这种情况发生。

  • 哈!这也是我的第一个想法,尤其是在这种混乱中跟踪结束标签让我头疼。但问题是,这只是这首诗的一个分支。我使用兄弟元素来显示一行中的两个 div。然后你只需单击一个,就可以转到它的子元素——一首完全不同的诗。就像选择你自己的冒险。但也许我可以反转我的设计,使用子元素来表示那些十字路口。我会弄清楚并在这里发布完成的诗歌!:D

返回
作者最近主题: