jQuery的切换最接近的信息

Question

我有以下的html：

<div class="col-md-12"> 
    <div class="group"> 
     <div class="label"> 
     <li class="interrogation">?</li> 
     </div> 
    </div> 
    <div class="message"></div> 
</div> 

<div class="col-md-12"> 
    <div class="group"> 
     <div class="label"> 
     <li class="interrogation">?</li> 
     </div> 
    </div> 
    <div class="message"></div> 
</div> 

这是我ns.init功能：

ns.init = function() { 
    $(".message").hide(); 
    $(".interrogation").click(function(){ 
     $(".interrogation").closest(".group").parent().find(".message").toggle(); 
    }); 
} 

当前的代码工作，但是当我点击一个它切换页面上所有消息其中。我怎样才能让它只切换问号后面的信息？

Answer 1

那是因为你在你的函数中使用了$(".interrogation")选择器。这在文档中选择全部具有该类的元素。使用$(this)仅将您单击的元素作为选择器的参考。

这里是工作提琴：

$(function() { 
 
    $(".message").hide(); 
 
    $(".interrogation").click(function(){ 
 
     $(this).closest(".group").parent().find(".message").toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-12"> 
 
    <div class="group"> 
 
       <div class="label"> 
 
        <li class="interrogation">?</li> 
 
       </div> 
 
      </div> 
 
     <div class="message">Message1</div> 
 
     </div> 
 
     <div class="col-md-12"> 
 
      <div class="group"> 
 
       <div class="label"> 
 
        <li class="interrogation">?</li> 
 
       </div> 
 
      </div> 
 
    <div class="message">Message2</div> 
 
</div>

Answer 2

在这里，你去了一个解决方案https://jsfiddle.net/denquhL1/1/

$('.interrogation').click(function(){ 
 
    $(this).closest('div.group').next('div.message').slideToggle(); 
 
});

.message{ 
 
    display: none; 
 
} 
 

 
.interrogation { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-12"> 
 
    <div class="group"> 
 
     <div class="label"> 
 
     <li class="interrogation">?</li> 
 
     </div> 
 
    </div> 
 
    <div class="message">Message 1</div> 
 
</div> 
 

 
<div class="col-md-12"> 
 
    <div class="group"> 
 
     <div class="label"> 
 
     <li class="interrogation">?</li> 
 
     </div> 
 
    </div> 
 
    <div class="message">Message 2</div> 
 
</div>

Onclick of .interrogation class，它会遍历到最近的.group容器，然后它会查找下一个.message容器。

而不是toggle，我用slideToggle与动画。

希望这会帮助你。

Answer 3

这样的事情？

var ns = {}; 
 
ns.init = function() { 
 
    $(".message").hide() 
 
    $(".interrogation").click(function() { 
 
    var commonParent = $(this).closest(".col-md-12"); 
 
    commonParent.find(".message").toggle(); 
 
    }); 
 
} 
 
ns.init();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-12"> 
 
    <div class="group"> 
 
    <div class="label"> 
 
     <li class="interrogation">?</li> 
 
    </div> 
 
    </div> 
 
    <div class="message">Msg 1</div> 
 
</div> 
 
<div class="col-md-12"> 
 
    <div class="group"> 
 
    <div class="label"> 
 
     <li class="interrogation">?</li> 
 
    </div> 
 
    </div> 
 
    <div class="message">Msg 2</div> 
 
</div>