Question

您好我正在尝试为jQuery中的多个元素进行切换，但是当点击不滑动切换元素时它不起加号按钮请在这里帮助 link

HTML

        <!-post  begin-- post 4 >
      <div class="col-xs-12 post-card">
        <div class="col-xs-3">

        </div>
        <div class="col-xs-7 post-start" >
         hello this is a test caption
        </div>
        <div class="col-xs-2">
          <button class="fa fa-plus plus-icon post-btn11" type="button">+</button>
        </div>

          <div  class="collapse col-xs-12" style="font-size: 16px; color:#646464;">
            <i class="fa fa-comments comment2"></i> <span>10 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
            10 likes</span>

          </div>
        </div>
        <!-post end for post 4-->

        <!-post  begin-- post 5 >
      <div class="col-xs-12 post-card">
        <div class="col-xs-3">

        </div>
        <div class="col-xs-7 post-start" >
         This is a test comment
        </div>
        <div class="col-xs-2">
          <button class="fa fa-plus plus-icon post-btn11" type="button" >+</button>
        </div>

          <div id="post-info" class="collapse col-xs-12" style="font-size: 16px; color:#646464;">
            <i class="fa fa-comments comment2"></i> <span>11 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
           13 likes</span>

          </div>
        </div>
        <!-post end for post 5-->

CSS

.post-card {
  background-color: #f4f4f4;
  padding: 10px;
  border: 1px solid #eee;
  margin-top: 10px;
}
.fa {
  float: right;

}
.post.info {
  display: none;
}

的jQuery

$(document).ready(function(){
$(".post-btn11").click(function(){
    $(this).siblings(".post-info").slideToggle();
});


});

Answer 1

完全错误的选择器post-info是id而不是class，然后post-info不是post-btn11的兄弟姐妹，而是它的父级兄弟姐妹，所以选择器应该喜欢这样：

$(".post-btn11").click(function(){
$(this).parent().siblings('#post-info').slideToggle();
});

但最好使用class因为它应该重复而不是唯一。同时将此类添加到第一个类中。

$(".post-btn11").click(function(){
$(this).parent().siblings('.post-info').slideToggle();
});

JSFiddle

Answer 2

以下是对代码的更正。我还更新了你的小提琴，所以去看看吧。为post-info元素提供ID时遇到问题。在更正后的版本中，我只需添加post-info作为类名。并且.sublings()函数也不起作用，因为您将它应用于您的按钮元素，并且它不会在其中找到任何嵌套元素。所以我需要先找到一个按钮的父元素，然后使用你的下一个post-info元素进入“同一级别”，然后只需使用.next()函数

$(document).ready(function(){
    $(".post-btn11").click(function(){
        $(this).parent(".col-xs-2").next(".post-info").slideToggle();
    });
  });

.post-card {
  background-color: #f4f4f4;
  padding: 10px;
  border: 1px solid #eee;
  margin-top: 10px;
}
.fa {
  float: right;
  
}
.post.info {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-post end for post 3-->

                <!-post  begin-- post 4 >
              <div class="col-xs-12 post-card">
                <div class="col-xs-3">
                  
                </div>
                <div class="col-xs-7 post-start" >
                 hello this is a test caption
                </div>
                <div class="col-xs-2">
                  <button class="fa fa-plus plus-icon post-btn11" type="button">+</button>
                </div>

                  <div  class="collapse col-xs-12 post-info" style="font-size: 16px; color:#646464;">
                    <i class="fa fa-comments comment2"></i> <span>10 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
                    10 likes</span>

                  </div>
                </div>
                <!-post end for post 4-->

                <!-post  begin-- post 5 >
              <div class="col-xs-12 post-card">
                <div class="col-xs-3">
                
                </div>
                <div class="col-xs-7 post-start" >
                 This is a test comment
                </div>
                <div class="col-xs-2">
                  <button class="fa fa-plus plus-icon post-btn11" type="button" >+</button>
                </div>

                  <div class="collapse col-xs-12 post-info" style="font-size: 16px; color:#646464;">
                    <i class="fa fa-comments comment2"></i> <span>11 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
                   13 likes</span>

                  </div>
                </div>
                <!-post end for post 5-->

jQuery为多个元素切换

2 个答案: