javascript - 向下遍历 DOM 以仅选择

Question

我正在使用 Drupal 7 为单个页面生成内容类型。我设置了一些 jQuery 以在每个摘要文本上附加一个按钮。我隐藏了正文。单击附加按钮时，我试图仅选择最近的 .hidden 类并在单击继续按钮时将其展开。理想情况下也可以在点击时隐藏摘要文本。我试过 .find() .closest() 没有任何运气。

var slideBodyText = $('.featured-summary').append('<button class="continue btn btn-success">Continue</button>');

slideBodyText;
$('.continue').on('click',function(){
  $('.hidden').find('div.hidden').toggleClass('.hidden');
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="field-content">
    <div class="featured-summary">
      <p>show text initially, then hide on click of button</p>
    </div>
    <div class="hidden">
      <div>
        <p>hidden text until botton is pressed.</p>
      </div>
    </div>
  </div>

  <div class="field-content">
    <div class="featured-summary">
      <p>show text initially, then hide on click of button/p>
    </div>
    <div class="hidden">
      <div>
        <p>hidden text until botton is pressed.</p>
      </div>
    </div>
  </div>

  <div class="field-content">
    <div class="featured-summary">
      <p>show text initially, then hide on click of button</p>
    </div>
    <div class="hidden">
      <div>
        <p>hidden text until botton is pressed.</p>
      </div>
    </div>
  </div>
</div>

任何帮助都会很棒。谢谢。

Answer 1

选择公共(public)父级，找到隐藏在那里，然后切换类。此外，在使用 toggleClass、addClass 或 removeClass 时，您不会添加前导 。

var slideBodyText = $('.featured-summary').append('<button class="continue btn btn-success">Continue</button>');

slideBodyText;
$('.continue').on('click', function() {
  $(this).closest('.field-content').find('div.hidden').toggleClass('hidden');
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="field-content">
    <div class="featured-summary">
      <p>show text initially, then hide on click of button</p>
    </div>
    <div class="hidden">
      <div>
        <p>hidden text until botton is pressed.</p>
      </div>
    </div>
  </div>

  <div class="field-content">
    <div class="featured-summary">
      <p>show text initially, then hide on click of button/p>
    </div>
    <div class="hidden">
      <div>
        <p>hidden text until botton is pressed.</p>
      </div>
    </div>
  </div>

  <div class="field-content">
    <div class="featured-summary">
      <p>show text initially, then hide on click of button</p>
    </div>
    <div class="hidden">
      <div>
        <p>hidden text until botton is pressed.</p>
      </div>
    </div>
  </div>
</div>