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

它是同胞而不是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>

请参阅上面的工作代码段。

如果有 in-between，您可以使用 .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>

JS这个函数问题

JS this function issues

html

javascript

this

toggle