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/

＆＃13;

＆＃13;

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

＆＃13;

.message{
  display: none;
}

.interrogation {
  cursor: pointer;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Onclick类的{p> .interrogation，它将遍历到最近的.group容器，然后它会查找下一个.message容器。

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

希望这会对你有所帮助。

Answer 3

这样的东西？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;