Question

在多个地方使用特定类时如何选择。我想在单击“ comnt-area-view类”时显示“ disp-comment类”，comnt-area-view类和disp-comment类在文档中使用了2次

我尝试使用$（this）.next，$（this）.find（className）和$（clasName，this），但是它不起作用

<script>


$(document).ready(function(){

 $(".disp-comment").hide();

     $(".comnt-area-view").click(function(){
     alert("hello");
        $(this).next(".disp-comment").show()

  });
});
</script>

<html>
 <a   class="btn-read-more comnt-area-view ">Add Comment</a><br/>
                  <div  class="user-name disp-comment">
                  <input type="text"  class="form-control cmnt-namefld" placeholder="Enter your name" >
                  <textarea class="cmnt-txtarea"  rows="4"  cols="40" name="comment" form="usrform"></textarea>

                  <input type="button" class="cmnt-btn" value="comment">

                  </div>

 <a   class="btn-read-more comnt-area-view ">Add Comment</a><br/>
                  <div  class="user-name disp-comment">
                  <input type="text"  class="form-control cmnt-namefld" placeholder="Enter your name" >
                  <textarea class="cmnt-txtarea"  rows="4"  cols="40" name="comment" form="usrform"></textarea>

                  <input type="button" class="cmnt-btn" value="comment">

                  </div>
</html>

Answer 1

问题是因为next()元素形式的.comnt-area-view是<br />，而不是.disp-comment元素。

有两个解决方法。第一种是在CSS中删除<br />元素，并使.comnt-area-view元素display: block在CSS中：

.comnt-area-view {
  display: block;
}

第二种方法是改用nextAll()：

$(this).nextAll('.disp-comment').first().show();

Answer 2

您必须添加一个父容器，并且必须为其找到所需的区域，如下所示：

$(document).ready(function() {

  $(".disp-comment").hide();

  $(".comnt-area-view").click(function() {
    alert("hello");
    $(this).parent('.aParentDiv').find(".disp-comment").show();

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="aParentDiv">
  <a class="btn-read-more comnt-area-view ">Add Comment</a><br/>
  <div class="user-name disp-comment">
    <input type="text" class="form-control cmnt-namefld" placeholder="Enter your name">
    <textarea class="cmnt-txtarea" rows="4" cols="40" name="comment" form="usrform"></textarea>

    <input type="button" class="cmnt-btn" value="comment">

  </div>
</div>

<div class="aParentDiv">
  <a class="btn-read-more comnt-area-view ">Add Comment</a><br/>
  <div class="user-name disp-comment">
    <input type="text" class="form-control cmnt-namefld" placeholder="Enter your name">
    <textarea class="cmnt-txtarea" rows="4" cols="40" name="comment" form="usrform"></textarea>

    <input type="button" class="cmnt-btn" value="comment">

  </div>
</div>

在站点中多次使用该类时如何选择

2 个答案: