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

它是 sibling ，而不是 child ，请使用.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>

请参阅上面的工作片段。

如果中间有东西，您可以使用.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>