Question

我有一个textarea用于评论各种对象。 textarea最初是隐藏的，点击评论链接时会显示commentbn，这就是我想要的内容。但问题是，当我点击commentbtn中的任何一个时，所有textarea都会显示出来！我不想要的。我只想要特定主题的文本区域。假设我希望评论显示在topic1中，那么只应显示topic1的评论，而不是topic2或topic3 e.t.c. 。我怎么做？任何帮助或指导将不胜感激。谢谢。

HTML：

                <div class="video">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <img src="image/youtube.jpg">
                    <div class="general">
                        <a href="#">Like</a> <a href="#" class="nos">27</a>
                        <a href="#" class="commentbtn">Comment</a> <a href="#" class="nos">27</a>
                        <a href="#">Share</a> <a href="#" class="nos">27</a>
                        <br>
                        <textarea class="comment"></textarea>
                    </div>
                </div>

                <div class="forum">
                    <a class="QA L" href="#">Q</a>
                    <a class="QA R" href="#">Photography</a>
                    <a class="QA R" href="#">Fashion and Style</a>
                    <a class="QA R" href="#">Design</a>
                    <p class="clear_both"></p>
                    <a href="#">What is the most amazing photograph you have ever taken?</a>
                    <img src="image/forum1.jpg">
                    <div class="general">
                        <a href="#">Like</a> <a href="#" class="nos">27</a>
                        <a href="#" class="commentbtn">Comment</a> <a href="#" class="nos">27</a>
                        <a href="#">Share</a> <a href="#" class="nos">27</a>
                        <br>
                        <textarea class="comment"></textarea>
                    </div>
                </div>

css：

#activity .comment {
    display: none;
    width: 502px;
    max-width: 502px;
    padding-bottom: 0px;
    border: 1px solid #dbdbdb;
    height: 17px;
    padding:5px;
    overflow: auto;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

JS：

<script type="text/javascript">
    $(function() {
        $('.commentbtn').click(function() {
            $('.comment').show();
            return false;
        });
    });
</script>

Answer 1

您需要定位所点击按钮的同级comment元素，而不是定位页面中的所有comment元素

$(function() {
    $('.commentbtn').click(function() {
        $(this).siblings('.comment').show();
        return false;
    });
});

Answer 2

试试这个，它将获得下一个实例点击而不是全部。

    $(function() {
        $('.commentbtn').click(function() {
            $(this).next('.comment').show();
            return false;
        });
    });

jquery .show（）仅来自所选的div

2 个答案: