Question

假设我有50 div，就像这样：

    <div class="btn1"></div> //Toggles the first container to appear
    <div class="btn2"></div> //Toggles the second container to appear
    <div class="btn3"></div> //Toggles the third container to appear

另有50个div包含信息，如下所示：

    <div class="container-1"><h1>This is the first container</h1></div>
    <div class="container-2"><h1>This is the second container</h1></div>
    <div class="container-3"><h1>This is the third container</h1></div>

只用一个功能点击每个按钮时，是否可以进行相应的div切换？我已经阅读了一些关于委托和操作父母/兄弟姐妹的内容，但它似乎只能在打开同一个容器的多个按钮上工作，而不是每个按钮打开每个容器。

我不认为为每个div写一个函数是可行的。

Answer 1

是的，这是可能的。基本上你需要添加对被点击对象的引用，因此click事件将知道要显示/隐藏的内容

＆＃13;

$(function() {
  $('.btn').on('click', function(e) {
    var $dataTarget = $($(this).data('target'));
    $dataTarget.show().siblings('.container').hide();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn btn1" data-target=".container-1"></div> //Toggles the first container to appear
<div class="btn btn2" data-target=".container-2"></div> //Toggles the second container to appear
<div class="btn btn3" data-target=".container-3"></div> //Toggles the third container to appear


<div class="container container-1">
  <h1>This is the first container</h1>
</div>
<div class="container container-2">
  <h1>This is the second container</h1>
</div>
<div class="container container-3">
  <h1>This is the third container</h1>
</div>

＆＃13;

这将显示目标容器，然后将隐藏其他容器。

Answer 2

使用从选择器^ Document here
使用data-*在按钮上存储相应的div。

选择data-*，然后使用选择器进行显示

＆＃13;

  $('div[class^=container]').hide();
$('div[class^=btn]').click(function() {
  $('div[class^=container]').hide();
  var thisclass = $(this).attr("data-class")
  $('.' + thisclass).show();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn1" data-class="container-1">1</div> 
<div class="btn2" data-class="container-2">2</div> 
<div class="btn3" data-class="container-3">3</div>

<div class="container-1">
  <h1>This is the first container</h1>
</div>
<div class="container-2">
  <h1>This is the second container</h1>
</div>
<div class="container-3">
  <h1>This is the third container</h1>
</div>

＆＃13;

Answer 3

您可以使用index和eq来执行此操作

＆＃13;

$("[class*='btn']").click(function(){
	$("[class*='container-']").eq($(this).index()-1).toggle();
})

＆＃13;

[class*="btn"]{
	width:150px;
	height:20px;
	border:2px solid #000;
	display:inline-block;
	cursor:pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>

<div class="container-1">
    <h1>This is the first container</h1>
</div>
<div class="container-2">
    <h1>This is the second container</h1>
</div>

<div class="container-3">
    <h1>This is the third container</h1>
</div>

＆＃13;

Answer 4

你可以使用这样的东西

$(document).ready(function() {
  $("div[class^='btn']").each(function() {
    $(this).click(function() {
      var str = $(this)[0].className;
      $(".container-" + str.substring(3, str.length)).toggle();
    });
  });
});

查找以btn开头的所有课程并对其应用点击事件。并根据数字隐藏相应的容器类。

以下是完整代码：

＆＃13;

$(document).ready(function() {
  $("div[class^='btn']").each(function() {
    $(this).click(function() {
      var str = $(this)[0].className;
      $(".container-" + str.substring(3, str.length)).toggle();
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn1">aaaa</div> //Toggles the first container to appear
<div class="btn2">bbbb</div> //Toggles the second container to appear
<div class="btn3">cccc</div> //Toggles the third container to appear
<div class="container-1">
  <h1>This is the first container</h1>
</div>
<div class="container-2">
  <h1>This is the second container</h1>
</div>
<div class="container-3">
  <h1>This is the third container</h1>
</div>

＆＃13;

（来源：小提琴https://jsfiddle.net/fxabnk4o/17/）

是否可以通过使用相同的功能单击不同的元素来切换不同的div？

4 个答案: