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") 选择器。这将选择文档中具有 class 的 all 元素。使用 $(this) 仅将您单击的元素作为选择器的参考。

这是一个有效的 fiddle:

$(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>

jQuery 切换最近的信息

jQuery Toggle closest info

html

javascript

jquery

toggle