Question

我想将切换添加到我的循环div类。但它没有用。这是我的Html代码。

`

<div class="bookNowBtn selectCar" id="vechile_toggle">
     <div class="vechile_toggleCls">
         Select
     </div>
 </div>
 <div class="row">
     <div class="col-md-12">
         <div class="vechile_roomCls" id="vechile_room">
             <form>
                 //something goes here
             </form>
         </div>
     </div>
 </div>

` 这是我的jquery COde。

`

<script>
     $(document).ready(function(){
         $(".vechile_toggleCls").click(function(){
             //alert('hello');
             $(this).parent().next().next().next(".vechile_roomCls").slideToggle();
         });
     });
 </script>

`

为什么我的代码无效

Answer 1

.next()用于定位下一个兄弟元素。您需要使用.find()代替：

 $(".vechile_toggleCls").click(function(){
   $(this).parent().next().find(".vechile_roomCls").slideToggle();
 });

<强> Working Demo

Answer 2

您正在寻找的元素是被点击元素的下一个兄弟的后代，所以

 $(document).ready(function() {
   $(".vechile_toggleCls").click(function() {
     //alert('hello');
     $(this).parent().next().find(".vechile_roomCls").stop().slideToggle();
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bookNowBtn selectCar" id="vechile_toggle">
  <div class="vechile_toggleCls">
    Select
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <div class="vechile_roomCls" id="vechile_room">
      <form>
        //something goes here
      </form>
    </div>
  </div>
</div>

jquery next（）函数不起作用

2 个答案: