根据ID和类显示/隐藏

Question

我编写了一些代码，根据单击的ID显示div类。我是个初学者，所以不知道如何使这段代码紧凑，现在似乎太长了。有人能给我一个更好的写作方法吗？

$("#Thumb1").on("click", function() {
  $('.v1').show();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});
$("#Thumb2").on("click", function() {
  $('.v1').hide();
  $('.v2').show();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});
$("#Thumb3").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').show();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb4").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').show();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb5").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').show();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb6").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').show();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb7").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').show();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb8").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').show();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb9").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').show();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb10").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').show();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb11").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').show();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb12").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').show();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb13").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').show();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb14").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').show();
  $('.v15').hide();
});

$("#Thumb15").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').show();
});

Answer 1

使用大量的css选择器和js字符串操作，我们可以轻松地缩短很多时间，为了优化目的，我们将使用JQuery可见选择器：

从选择器开始：

/*  elements with an href starting with ".org" */
a[href^=".org"] {
  font-style: italic;
}

子字符串：

const str = 'Mozilla';

console.log(str.substring(1, 3));
// expected output: "oz"

console.log(str.substring(2));
// expected output: "zilla"

这里的逻辑是从一个明确的状态开始，使用CSS隐藏除第一个元素之外的所有内容。

然后，每当对一个Thumb进行单击时，我们就会将它中的数字减少，以便以后再使用。我们隐藏从v开始的每个可见类，然后显示带有"v"+id类的隐藏类。

const thumb = "Thumb";

$(`[id^=${thumb}]`).on("click", (e) => {
  const id = $(e.target).attr("id").substring(thumb.length);
  $("[class^=v]:visible").hide();
  $(`.v${id}:hidden`).show();
});

[class^=v]:not(:nth-of-type(1)) {
  display: none;
}

1
2
3

1
2
3

虽然这应该适用于您，但我建议检查HTML单选按钮组件。