javascript - 用js切换类，只到选定的div

Question

我正在尝试通过单击 相邻 div 中的按钮来切换 div 的可见性。我正在使用一个类 .expand触发 onClick 和另一个类 .target作为目标，但问题是每个带有 .target 的 div类触发 onClick，而不仅仅是我想要的。从逻辑上讲，我明白为什么会这样，但我不知道如何解决它......这是一个 Bootstrap :http://www.bootply.com/oSGM0jOG6q# .

$('.expand').on('click', function(e){

    $(".target").toggleClass("hidden");
    $(".target").toggleClass("visible");

});

HTML

 <!-- Thumbnail -->
  <div class="col-sm-4">
    <div class="thumbnail">
      <img src="//placehold.it/400x300&amp;text=Photo1">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p><a href="#" class="btn btn-primary expand" role="button">Expand</a></p>
      </div>
    </div>
  </div>

  <!-- Big-Image -->
  <div class="col-xs-12 target hidden">
    <div class="thumbnail">
      <img src="//placehold.it/1200x900&amp;text=Photo1">
      <div class="caption">
        <h3>HighRes</h3>
        <p><a href="#" class="btn btn-primary btn-danger expand" role="button">Close</a></p>
      </div>
    </div>
  </div>

PS - 我更喜欢使用 bootstrap 的隐藏/可见类来进行干净的标记，但我并没有完全坚持下去。

Answer 1

您可以使用 .closest()找到类 col-sm-4 的父 div 然后使用 .next()找到目标

$('.expand').on('click', function(e){
    $(this).closest('.col-sm-4').next(".target").toggleClass("hidden visible");
});