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，我想要实现的是，每当我点击带有classname div的元素时，我希望reply_box带有类名inline_reply 。我使用jQuery切换方法来实现这一点，代码是，

jQuery

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

我的问题：每当我点击回复按钮时，所有具有类名reply_box的元素都会被切换，而我只想切换我点击的那个< / strong>即可。我不想为所有div's添加不同的类名，因为会有很多帖子。有一个简单的方法吗？我听说可以使用this完成此操作。但我不知道如何。任何有一个简单例子的人都会非常感激。我想我并没有让你们困惑。

Answer 1

因为我认为你必须使用 next 关键字作为以下

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

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

另一个div有文字报告，因此您可以再次使用下一步

$(".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类。

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

3 个答案: