jquery - 如何访问与引发事件的元素相关的特定 div？

Question

我创建了一个网站，用户可以在这里提问并允许其他人回复。这些问题包含在一个 div 中，然后包含另一个 div，其 CSS 属性为 display: none。

我在母 div 中有一个按钮，它将打开包含回复或评论表单的 div。我的代码运行良好，

现在，我唯一的问题是，每当我点击评论按钮时，它都会打开所有其他回复部分 div，即使在用户没有点击的问题中也是如此。

如何获取用户单击回复按钮的特定 div，并且只打开该母 div 而不是所有其他 div 的回复表单？

Answer 1

jQuery:

$(".button").click(function(){
    //here the button element is pointed by -this-!!!
    //so "this" is the element contained in your div...
    $(this).parent("questionDiv") //<- will point to the div that contain the button
    //so, having the button (this), you can get the parent element that contain the question and in it the mother div
});

.parent() , 还要检查 .closest()和 .siblings()

希望这能澄清我从你的问题中理解的内容:)

我要假设一些事情...

DOM:你的 html 代码

<div class="mother">
    <div class="question">
        <button class="respBtn">Respond</button>
    </div>
    <div class="respond"> ..more elemnts.. </div>
</div>

j查询:

 $(document).ready(function(){
        $(".respBtn").click(function(){
          console.log("click");
          //here goes the code that shows the div
            let moderDiv = $(this).parents(".mother");
            console.log(moderDiv.html());
            moderDiv.find("div.respond").each(function(){
              $(this).show();
          });
        });
    });

CSS:

   .respond{
       display : none ;
   }

这是一个示例...jquery 负责知道按下了哪个按钮并指向 DOM 的正确部分。

希望这能澄清我的想法:)