如何编写针对不同div的多次单击函数？

Question

我在一页上有很多按钮。每一个都与页面上各自独立的div相关。单击按钮1时，显示div 1。单击按钮2时，显示div 2，以此类推。

下面编写下面的jQuery的最好方法是什么，这样我就不必为每个需要添加的新按钮和新div继续编写新函数了？

​

$("#bio-1").click(function () {
     $('.one').toggle(); 
});


 $("#bio-2").click(function () {
     $('.two').toggle(); 
});

$("#bio-3").click(function () {
     $('.three').toggle(); 
});

$("#bio-4").click(function () {
     $('.four').toggle(); 
});

​

Answer 1

您可以尝试使用data-*属性，单击该属性只可以找到要切换的特定元素。

演示：

​

$("[id^=bio-").click(function () {
  $(`div[data-id=${this.id}]`).toggle(); 
});

div{
 width: 100%;
 border: 1px solid lightgray;
 margin: 5px;
 padding: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="bio-1">Button-1</button>
<button id="bio-2">Button-2</button>
<button id="bio-3">Button-3</button>
<button id="bio-4">Button-4</button>

<div class="one" data-id="bio-1">One</div>
<div class="two" data-id="bio-2">Two</div>
<div class="three" data-id="bio-3">Three</div>
<div class="four" data-id="bio-4">Four</div>

​

Answer 2

这取决于你如何初始化你的显示器..。隐藏的或所有可见的div。这就像一个基于公共标识符的切换，它将使您保留实际的HTML代码，并缩短和组织您的javascript代码。

若要使用切换函数，应按照预期的可见性逻辑初始化样式。

​

$('div[data-id!=""]').hide();
$("[id^=bio-]").on("click", function () {
$('div[data-id!=""]').hide();
$('div[data-id="'+$(this).data('id')+'"]').show();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="bio-1" data-id="1">One</button>
<button id="bio-2" data-id="2">Two</button>
<button id="bio-3" data-id="3">Three</button>
<button id="bio-4" data-id="4">Four</button>

<div class="one" data-id="1">One</div>
<div class="two" data-id="2">Two</div>
<div class="three" data-id="3">Three</div>
<div class="four" data-id="4">Four</div>

​