javascript - 仅将点击事件应用于目标类 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。我已经使用 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 更新 **

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

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

next() 根据选择器逐一遍历节点。

希望对你有帮助