仅将点击事件应用于目标类 jQuery

Question

这个问题之前可能有人问过，但我无法掌握答案，因为每个问题都有很多代码。我不知道怎么用语言表达。我想你们一旦看到代码就会明白这种情况。

HTML

                            <div class="row">
                                <div class="large-9 columns">
                                    <h3>By Christian Christiansen</h3>
                                </div>
                                <div class="large-3 columns">
                                    <p class="raty"></p>
                                </div>
                                <div class="large-11 large-offset-1 columns">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, quasi nisi optio, earum facilis perspiciatis temporibus nobis nam velit incidunt. Recusandae accusamus pariatur, explicabo iure ea ex perspiciatis perferendis quam!</p>
                                </div>
                                <div class="large-8 columns">
                                    <img src="images/comments.png" alt="">
                                    <p class="inline_cmt">Comments (3)</p>
                                </div>
                                <div class="large-2 columns">
                                    <img src="images/reply.png" alt="">
                                    <p class="inline_rply">Reply</p>
                                </div>
                                <div class="large-2 columns">
                                    <img src="images/report.png" alt="">
                                    <p class="inline_rep">Report</p>
                                </div>
                                <div class="large-12 columns reply_box">
                                    <label>
                                        <textarea placeholder="submit your reply here.."></textarea>
                                    </label>
                                    <a href="#" class="button right">Submit</a>
                                </div>
                                <hr>
                            </div>
                            <div class="row">
                                <div class="large-9 columns">
                                    <h3>By Christian Christiansen</h3>
                                </div>
                                <div class="large-3 columns">
                                    <p class="raty"></p>
                                </div>
                                <div class="large-11 large-offset-1 columns">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, quasi nisi optio, earum facilis perspiciatis temporibus nobis nam velit incidunt. Recusandae accusamus pariatur, explicabo iure ea ex perspiciatis perferendis quam!</p>
                                </div>
                                <div class="large-8 columns">
                                    <img src="images/comments.png" alt="">
                                    <p class="inline_cmt">Comments (3)</p>
                                </div>
                                <div class="large-2 columns">
                                    <img src="images/reply.png" alt="">
                                    <p class="inline_rply">Reply</p>
                                </div>
                                <div class="large-2 columns">
                                    <img src="images/report.png" alt="">
                                    <p class="inline_rep">Report</p>
                                </div>
                                <div class="large-12 columns reply_box">
                                    <label>
                                        <textarea class="custom_textarea" placeholder="submit your reply here.."></textarea>
                                    </label>
                                    <a href="#" class="button right">Submit</a>
                                </div>
                                <hr>
                            </div>


<div class="large-12 columns reply_box">
     <label>
       <textarea placeholder="submit your reply here.."></textarea>
     </label>
     <a href="#" class="button right">Submit</a>
</div>

我的代码中有多次相同的 html，我想要实现的是，我希望在单击类名为 inline_reply 的元素时出现类名为 reply_box 的 div。我已经使用jQuery切换方法来实现这一点，代码是，

jQuery

    $(".inline_rply").click(function() {
        $(".reply_box").toggle();
    });  

我的问题： 每当我点击回复按钮时，所有类名为 reply_box 的元素都会被切换，而 我只想切换我点击过的元素。我不想为所有div's 添加不同的类名，因为会有很多帖子。有没有简单的方法来做到这一点？我听说这可以使用this 来完成。但我不知道如何。任何有一个简单例子的人都将不胜感激。我想我没有把你们弄糊涂。

Answer 1

因为我认为您必须使用 next 关键字，如下所示

$(".inline_rply").click(function() {
        $(this).closest('div').next('.reply_box').toggle();
    });

** 根据您的 html 更新 **

还有一个 div 包含文本 Report，因此您可以再次使用 next，如下所示

$(".inline_rply").click(function() {
        $(this).closest('div').next().next('.reply_box').toggle();
    });

next()按照选择器逐个遍历节点。

希望对你有帮助...

Answer 2

我认为你只是应用这个并检查可能会解决你的问题。

$(".inline_rply").click(function() {
        $(this).parent().next(".reply_box").toggle();
    });

更新答案

$(".inline_rply").click(function() {
        $(this).parent().next().next(".reply_box").toggle();
    }); 

Demo

Demo 2

Answer 3

使用this 定位当前元素

$(".inline_rply").click(function() {
      $(this).closest('div.large-2').next(".reply_box").toggle(); // this will be the clicked 
});  

.closest() 将获取使用类名指定的最近的父元素，使用 next() 您可以定位下一个包含元素的 .reply_box 类。