Javascript 仅将click事件应用于目标类jQuery

这个问题可能会在早些时候被问到，但我无法掌握答案，因为每个问题中都有很多代码。我不知道如何用语言来表达。我想你们看到代码后就会明白情况了

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>

---

我的问题是：每当我单击“回复”按钮时，所有具有类名

回复框的元素都会被切换，而我只想切换我单击的元素。我不想给所有的
div
添加不同的类名，因为会有很多帖子。有没有简单的方法？我听说这可以用
this
来完成。但我不知道该怎么做。任何人只要举个简单的例子，都将不胜感激。我想我没有把你们搞糊涂。
使用
这个
来瞄准当前元素

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

.nextest（）
将获得使用类名和
next（）
指定的最近父元素。您可以将下一个
作为目标。回复框
包含元素的类。
因为我认为您必须使用next关键字，如下所示

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

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

**根据您的html进行更新**

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

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

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

next（）根据选择器逐个遍历节点

希望它能帮上忙…
我想你只要应用这个，检查一下就可以解决你的问题

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

更新的答案

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


类名为
large-2
和
large-12
的div之间的相关性是打字错误？？它们不相关。我知道这令人困惑。我只是随机选择了
div的
，只是为了显示我的类存在的位置。不起作用。但我想这不是你的错。我已经更新了我问题的
html
部分，两次出现了我想应用的相同代码。这也有效。现在我不知道该使用哪一个LOL。哪一个有更多的可能性？.closest（）api遍历并找到第一个并停止遍历，但是.parent（）遍历每个父级直到文档结束。我想说的是.nextest（）比.parent（）…nextest（）api现在对我来说要快。所以我想我应该用它，因为我有速度优势。谢谢你
最近的
或
家长
？我应该用哪一个？两个都在工作。@ThomasSebastian您应该使用`.closest（）。
$(".inline_rply").click(function() {
        $(this).parent().next().next(".reply_box").toggle();
    });