如何在 jQuery 中通過單擊按鈕顯示特定的 div 元素并同時關閉所有其他元素？
例如，我累了：
$('.button').each(function(i) {
$(this).click(function() {
$('.details').eq(i).slideToggle("slow")
$('.button').eq(i);
});
});
.details {
background: grey;
display: none;
}
.is-open {
display: block;
}
<!-- language: lang-html -->
<button id="button0" class="button">button 1</button>
<button id="button1" class="button">button 2</button>
<button id="button2" class="button">button 3</button>
<div class="details" id="details0">
<h1>Details Person 1</h1>
</div>
<div class="details" id="details1">
<h1>Details Person 2</h1>
</div>
<div class="details" id="details2">
<h1>Details Person 3</h1>
</div>
但這只會切換一個元素而不會關閉其他元素。但是我想通過單擊尚未打開的元素來關閉每個打開的元素。
我使用建議的兄弟姐妹（）方法進行了嘗試，但這不適用于我的情況，因為我的按鈕元素與按鈕元素分開。
實作上述效果的最佳解決方案是什么？
uj5u.com熱心網友回復：
你想實作選項卡嗎？ https://jqueryui.com/tabs/
$('.button').each(function (i) {
$(this).click(function () {
$('.details').eq(i).show("slow").siblings('.details').hide();
});
});
uj5u.com熱心網友回復：
這是我的解決方案：
$('.button').each( function(index,button){
//console.log(button.outerHTML);
$(button).click(function(){
let id=this.id.replace("button","");
$(".details").hide()
$("#details" id).show();
})
});.details {
background: grey;
display: none;
}
.is-open {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button0" class="button">button 1</button>
<button id="button1" class="button">button 2</button>
<button id="button2" class="button">button 3</button>
<div class="details" id="details0">
<h1>Details Person 1</h1>
</div>
<div class="details" id="details1">
<h1>Details Person 2</h1>
</div>
<div class="details" id="details2">
<h1>Details Person 3</h1>
</div>uj5u.com熱心網友回復：
如果您將 HTML 調整為具有資料屬性，其中每個按鈕 data-id 對應于 details 元素上的 data-id，它會變得更加簡單。
// Use event delegation to listen to events from the buttons
$(document).on('click', 'button', handleClick)
function handleClick() {
// Grab the id from the button
const id = $(this).data('id');
// Remove all the `show` classes from the details elements
$('.details').removeClass('show');
// And then add that class back on to the details element
// that corresponds to the id
$(`.details[data-id=${id}]`).addClass('show');
}.details { background: grey; display: none; }
.show { display: block; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-id="1">button 1</button>
<button data-id="2">button 2</button>
<button data-id="3">button 3</button>
<div class="details" data-id="1">
<h1>Details Person 1</h1>
</div>
<div class="details" data-id="2">
<h1>Details Person 2</h1>
</div>
<div class="details" data-id="3">
<h1>Details Person 3</h1>
</div>附加檔案
- 事件委托
- 模板/字串文字
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/433495.html
標籤：javascript jQuery
上一篇：我如何在反應中替換字串