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

我试图通过单击相邻div中的按钮来切换div的可见性。我正在使用一个类.expand来触发onClick并将另一个类.target用作目标，但是问题是，每个具有.target类的div都将触发onClick，而不仅仅是我想要的那个。从逻辑上讲，我理解为什么会这样，但是我不知道如何解决它。这是一个提示：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的隐藏/可见类进行清洁标记，但并不完全局限于此。

最佳答案

您可以使用.closest()查找类为col-sm-4的父div，然后使用.next()查找target

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

关于javascript - 使用js切换类，仅切换到选定的div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24321063/