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>