显示和隐藏点击不同按钮时的不同div

Question

我试图显示和隐藏不同的div's点击不同的按钮。例如，当我点击button "1"时，它显示了id="block-1"的块。当我点击按钮"4"， id="block-4"显示和前一个块#block-1隐藏。我尝试使用不同的ID，因为我不知道任何其他解决方案来显示不同内容的块里面。不幸的是，我当前的代码不能正常工作:它切换正确的类来显示div，但是一旦单击带有number的按钮，我就不能隐藏前一个div或更改块。在默认状态下，当页面加载时，第一个块(#block-1)应该总是可见的。下面是与结果进行交互的链接:https://codepen.io/tomavl/pen/vYRLJVY

<div class="filter">
<button class="filter-btn active" id="1">1</button>
<button class="filter-btn" id="2">2</button>
<button class="filter-btn" id="3">3</button>
<button class="filter-btn" id="4">4</button>
</div>
<div class="block">
<div class="block-1 block-card active" id="block-1">Block 1</div>
<div class="block-2 block-card" id="block-2">Block 2</div>
<div class="block-3 block-card" id="block-3">Block 3</div>
<div class="block-4 block-card" id="block-4">Block 4</div>
</div>

background-color: red;
color: white;
}
.block-card {
display: none;
}
.block-card.active {
display: block;
}

var filterBtn = document.querySelectorAll(".filter-btn");
for (var i = 0; i < filterBtn.length; i++) {
filterBtn[i].onclick = function () {
if (this.classList) {
for (var j = 0; j < filterBtn.length; j++) {
filterBtn[j].classList.remove("active");
}
this.classList.add("active");
} else {
this.active += " " + active;
}
};
}
$("#2").on("click", function (e) {
e.stopImmediatePropagation();
if ($(this).hasClass("active")) {
$(".block-2").addClass("active");
} else {
$(".block-2").removeClass("active");
}
});
$("#3").on("click", function (e) {
e.stopImmediatePropagation();
if ($(this).hasClass("active")) {
$(".block-3").addClass("active");
} else {
$(".block-3").removeClass("active");
}
});
$("#4").on("click", function (e) {
e.stopImmediatePropagation();
if ($(this).hasClass("active")) {
$(".block-4").addClass("active");
} else {
$(".block-4").removeClass("active");
}
});

Answer 1

通过使用通用类按行为对内容进行分组，可以用更少的代码实现所需的功能。您可以在需要的地方使用data属性来在元素中存储自定义元数据。

在下面的示例中，所有按钮都使用相同的事件处理程序。区别仅仅来自于用于更改选择器的按钮上的data属性。所有相关的代码只是消除了active类元素应用到目标之前。

let $blocks = $('.block-card');
$('.filter-btn').on('click', e => {
let $btn = $(e.target).addClass('active');
$btn.siblings().removeClass('active');

let selector = $btn.data('target');
$blocks.removeClass('active').filter(selector).addClass('active');
});

body {
background-color: red;
color: white;
}
.block-card {
display: none;
}
.block-card.active {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="filter">
<button class="filter-btn active" data-target="#block-1">1</button>
<button class="filter-btn" data-target="#block-2">2</button>
<button class="filter-btn" data-target="#block-3">3</button>
<button class="filter-btn" data-target="#block-4">4</button>
</div>
<div class="block">
<div class="block-card active" id="block-1">Block 1</div>
<div class="block-card" id="block-2">Block 2</div>
<div class="block-card" id="block-3">Block 3</div>
<div class="block-card" id="block-4">Block 4</div>
</div>