Question

我试图通过点击邻居 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的隐藏/可见类来进行干净的标记，但我并不完全坚持它。

Answer 1

尝试使用.closest()来获取静态父级，我只是将静态父级视为.thumbnail，因为col-sm-4此类将获得更改取决于布局，我假设。因此，抓住最近的.thumbnail并获取其父级，然后将下一个兄弟目标定位到它。

$('.expand').on('click', function(e){
    $(this).closest('.thumbnail').parent().next('.target').toggleClass("hidden visible");
});

DEMO

Answer 2

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

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

Answer 3

这是你的bootply http://www.bootply.com/gk8gtlaH1L

添加一个带有新扩展的div包装两个div。对你来说很容易：）

JS CODE

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

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

});

HTML CODE

<div class="newExpand">
  <!-- 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"><!-- use js to add/remove class"hidden" on button click -->
    <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>
</div>

Answer 4

要使用不会过多地将JavaScript绑定到DOM结构的声明性方法，可以在每个按钮元素上设置data-target以指定单击按钮时要切换的目标元素，并更新点击处理程序以查找已识别的元素。

例如：

$('.expand').on('click', function(e){
  var sel = $(e.target).data("target");
  if (sel) {
    $(sel).toggleClass("hidden");
    $(sel).toggleClass("visible");
  }
});

在HTML中：

<!-- Thumbnail -->
<div class="col-sm-4">
    <a href="#" class="btn expand" data-target="#bigImage" role="button">Expand</a>
</div>

<!-- Big-Image -->
<div id="bigImage" class="hidden">
    This div will be hidden/shown when the button is clicked
</div>

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

4 个答案:

DEMO