JS这个函数问题

Question

最近我遇到了这个问题，请任何人帮助我。我正在尝试通过此功能显示和隐藏一个 div。

HTML：

<div class="question_frame">
    <div class='help'>?</div>
    <div class="help_content">Show & hide this text</div>
</div>

JavaScript：

$(".question_frame").find( '.help' ).click(function(){
    $( this ).find( '.help_content' ).toggle(1000);
});

Answer 1

它是兄弟姐妹而不是孩子，使用.next()：

$(".question_frame").find( '.help' ).click(function(){
    $( this ).next( '.help_content' ).toggle(1000);
});

该事件在.help 上触发，而不是在.question_frame 上触发。这里this指的是触发事件的元素，即.help。

$(function () {
  $( '.help_content' ).hide();
  $(".question_frame").find( '.help' ).click(function(){
    $( this ).next( '.help_content' ).toggle(1000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question_frame">
  <div class='help'>?</div>
  <div class="help_content">Show & hide this text</div>
</div>

参见上面的工作 sn-p。

如果中间有什么，你可以使用.nextAll()：

$(function () {
  $( '.help_content' ).hide();
  $(".question_frame").find( '.help' ).click(function(){
    $( this ).nextAll( '.help_content' ).first().toggle(1000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question_frame">
  <div class='help'>?</div>
  <div class="some">Some?</div>
  <div class="help_content">Show & hide this text</div>
</div>

或者，您也可以使用.siblings()：

$(function () {
  $( '.help_content' ).hide();
  $(".question_frame").find( '.help' ).click(function(){
    $( this ).siblings( '.help_content' ).toggle(1000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question_frame">
  <div class='help'>?</div>
  <div class="some">Some?</div>
  <div class="help_content">Show & hide this text</div>
</div>