Question

我很感激jQuery的帮助。一切都很好： jsfiddle- this works fine

但是在这里，在同一页面上有两个相同的HTML块，它们发生冲突（它们相互干扰，当你点击第二个块中的“show”时，它会影响第一个块）： jsfiddle - the problem

有没有办法改变JS（正确使用.closest（）,. find（），其他遍历技术），这样我可以根据需要在同一页面上拥有尽可能多的块，并且所有块都可以独立工作？（没有发明新的ID并乘以JS代码）。

我可以轻松地追踪<li>，但DIV可以吗？

修改（我没有任何声誉，所以使用编辑：非常感谢您的帮助和额外刷新ID。一切都很完美。

一切顺利）

Answer 1

您有id重复（将它们转换为类名.funFactAnswer），您的选择器是通用的，使其更具针对目标。

 $(document).ready(function () {
      $(".showfunFactAnswer").click(function () {
         var $this = $(this);
         $this.closest('.funFactWrap').find('.funFactAnswer').slideDown()
         $this.next().removeClass("hide");
     });
     $(".hideButtonAnswer").click(function () {
         $(this).addClass("hide").closest('.funFactWrap').find('.funFactAnswer').slideUp()
     });

 });

<强> Fiddle

使用重复的id，id选择器将只选择具有相同id的元素的第一个实例。

正确遍历同一块中的元素

1 个答案: