Как написать функцию множественного клика, которая предназначена для разных 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 - * атрибут, который при нажатии вы можете использовать, чтобы найти только указанный элемент c для переключения.

Демо:

$("[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.

Чтобы использовать функцию переключения, вам следует инициализировать стили, следуя ожидаемая логика видимости c.

$('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>

Answer 3

Демо Вы должны использовать переключатель, а также показать функцию jquery.

$(".clickBUtton").click(function () {
    var id = this.id; // click class id      
    $("#DIV"+id).show(); // toggle and you also add show
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button class="clickBUtton" id="one">ONE</button>
<button class="clickBUtton" id="two">TWO</button>

<div id="DIVone" style="display:none;">one div</div>
<div id="DIVtwo" style="display:none;">two div</div>