Question

我得到了一个项目的代码。当我单击#showbutton时，我希望所有注释都可以滑出。对于一个要素来说，这并不难做到。我为此使用了这段代码：

（这是帖子内的评论部分）

   <button id="show">Show comments</button>
   <div class="comments2" id="comments">
      <p><b>person</b>: comment comment comment </p>
      <p><b>person</b>: comment comment</p>
      <p><b>person</b>: comment comment</p>
      <p><b>person</b>: comment comment</p>
    </div>
    <button id="close">Close comments</button>

$( document ).ready(function() {
    $("#comments").hide();
    $("#close").hide();

    $("#show").click(function() {
        $("#show").hide();
        $("#comments").slideDown(1000);
        $("#closebutton").slideDown(1100);
    });

    $("#close").click(function() {
        $("#comments").hide();
        $("#close").hide();
        $("#show").show();
    });

});

但是现在我有问题了，还有更多带评论的帖子。每个帖子都可以滑出自己的评论。如果我单击一个按钮只有一篇文章的所有评论都将滑出，其余评论将不起作用。我该如何使每个按钮都可以滑动出自己注释的代码

Answer 1

您需要更改ID和类

   <button class="show">Show comments</button>
   <div class="comments">
      <p><b>person</b>: comment comment comment </p>
      <p><b>person</b>: comment comment</p>
      <p><b>person</b>: comment comment</p>
      <p><b>person</b>: comment comment</p>
    </div>
    <button class="close">Close comments</button>



   <button class="show">Show comments</button>
   <div class="comments">
      <p><b>person</b>: comment comment comment </p>
      <p><b>person</b>: comment comment</p>
      <p><b>person</b>: comment comment</p>
      <p><b>person</b>: comment comment</p>
    </div>
    <button class="close">Close comments</button>

使它在所有“部分”中均相等。

然后您可以做类似

的操作

$( document ).ready(function() {
   $(".comments").hide();
   $(".close").hide();

   $(".show").click(function() {
    $(this).hide();
    $(this).next().slideDown(1000);
    $(this).next().next().slideDown(1100);
  });

  $(".close").click(function() {
    $(this).prev().prev().show();
    $(this).prev().hide();
    $(this).hide();
  });
 });

有些cr脚，但对于您的情况还是可行的-如果每个“部分”有更多元素，则需要像HTML那样的循环或更好的结构。

<!DOCTYPE html>
<html>
<script
			  src="https://code.jquery.com/jquery-3.3.1.min.js"
			  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
			  crossorigin="anonymous"></script>
<script type="text/javascript">

$( document ).ready(function() {
    $(".comments").hide();
    $(".close").hide();

    $(".show").click(function() {
        $(this).hide();
        $(this).next().slideDown(1000);
        $(this).next().next().slideDown(1100);
    });

    $(".close").click(function() {
		$(this).prev().prev().show();
        $(this).prev().hide();
        $(this).hide();
    });

});
</script>

<body>
	
	   <button class="show">Show comments</button>
	   <div class="comments">
		  <p><b>person</b>: comment comment comment </p>
		  <p><b>person</b>: comment comment</p>
		  <p><b>person</b>: comment comment</p>
		  <p><b>person</b>: comment comment</p>
		</div>
		<button class="close">Close comments</button>

	

	   <button class="show">Show comments</button>
	   <div class="comments">
		  <p><b>person</b>: comment comment comment </p>
		  <p><b>person</b>: comment comment</p>
		  <p><b>person</b>: comment comment</p>
		  <p><b>person</b>: comment comment</p>
		</div>
		<button class="close">Close comments</button>
	
</body>

</html>

Answer 2

使用通用类代替ID。

如果显示或隐藏按钮，则还可以在注释按钮和条件逻辑上使用相同的类。

还将每个注释块包装在自己的容器中，从而简化了遍历实例特定元素的操作

$('.comment-button').click(function() {
  // button event occured on
  var $btn = $(this).hide(),
    // instance specific comments
    $comments = $btn.siblings('.comments'),
    // this is a show or hide button?
    isShow = $btn.hasClass('show'),
    // other button related to this instance
    $otherBtn = $btn.siblings('.comment-button');
    
  if (isShow) {
    // what to do when show button clicked
    $comments.slideDown(1000, function(){
       $otherBtn.slideDown()
    })
    
  } else {
    // what to do when close button clicked  
    $comments.hide();
    $otherBtn.show()
  }

});

.comments,
.comment-button.close {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment-container">
  <button class="comment-button show ">Show comments 1</button>
  <div class="comments">
    <p>Comments 1 </p>
  </div>
  <button class="comment-button close">Close comments 1</button>
</div>

<div class="comment-container">
  <button class="comment-button show">Show comments 2</button>
  <div class="comments">
    <p>Comments 1 </p>
  </div>
  <button class="comment-button close">Close comments 2</button>
</div>

多个按钮时如何触发每个按钮？使用Jquery

2 个答案: