如何在不同的点击中显示和隐藏多个不同的元素？

Question

我在每个触发元素上使用了 onClick 函数，使其在点击时具有 show/hide 多个元素 ID。 show/hide 元素默认使用 CSS 显示属性隐藏（前 3 个主要元素除外）。 onClick 事件将更改多个元素的显示属性，使一些元素可见，一些元素不可见。随着触发元素列表和 show/hide 元素的增长，脚本将变得非常低效和重复。如果不使用大量重复的 javascript 件，我还能如何实现以下目标？下面的代码片段是该脚本的一个非常简化的版本。

function trigger1(){
  document.getElementById('trigger1').style.display ='none';
  document.getElementById('trigger2').style.display ='none';
  document.getElementById('trigger3').style.display ='none';
  document.getElementById('element1').style.display ='block';
  document.getElementById('element2').style.display ='block';
  document.getElementById('element3').style.display ='block';
  document.getElementById('element4').style.display ='none';
  document.getElementById('element5').style.display ='none';
  document.getElementById('subelement1').style.display ='none';
  document.getElementById('subelement2').style.display ='none';
  document.getElementById('subelement3').style.display ='none';
}
function trigger2(){
  document.getElementById('trigger1').style.display ='none';
  document.getElementById('trigger2').style.display ='none';
  document.getElementById('trigger3').style.display ='none';
  document.getElementById('element1').style.display ='none';
  document.getElementById('element2').style.display ='none';
  document.getElementById('element3').style.display ='none';
  document.getElementById('element4').style.display ='block';
  document.getElementById('element5').style.display ='block';
  document.getElementById('subelement1').style.display ='none';
  document.getElementById('subelement2').style.display ='none';
  document.getElementById('subelement3').style.display ='none';
}
function trigger3(){
  document.getElementById('trigger1').style.display ='none';
  document.getElementById('trigger2').style.display ='none';
  document.getElementById('trigger3').style.display ='none';
  document.getElementById('element1').style.display ='block';
  document.getElementById('element2').style.display ='none';
  document.getElementById('element3').style.display ='block';
  document.getElementById('element4').style.display ='block';
  document.getElementById('element5').style.display ='none';
  document.getElementById('subelement1').style.display ='none';
  document.getElementById('subelement2').style.display ='none';
  document.getElementById('subelement3').style.display ='none';
}
function trigger4(){
  document.getElementById('trigger1').style.display ='none';
  document.getElementById('trigger2').style.display ='none';
  document.getElementById('trigger3').style.display ='none';
  document.getElementById('element1').style.display ='none';
  document.getElementById('element2').style.display ='none';
  document.getElementById('element3').style.display ='none';
  document.getElementById('element4').style.display ='none';
  document.getElementById('element5').style.display ='none';
  document.getElementById('subelement1').style.display ='block';
  document.getElementById('subelement2').style.display ='block';
  document.getElementById('subelement3').style.display ='none';
}
function trigger5(){
  document.getElementById('trigger1').style.display ='none';
  document.getElementById('trigger2').style.display ='none';
  document.getElementById('trigger3').style.display ='none';
  document.getElementById('element1').style.display ='none';
  document.getElementById('element2').style.display ='none';
  document.getElementById('element3').style.display ='none';
  document.getElementById('element4').style.display ='none';
  document.getElementById('element5').style.display ='none';
  document.getElementById('subelement1').style.display ='none';
  document.getElementById('subelement2').style.display ='block';
  document.getElementById('subelement3').style.display ='block';
}
function trigger6(){
  document.getElementById('trigger1').style.display ='none';
  document.getElementById('trigger2').style.display ='none';
  document.getElementById('trigger3').style.display ='none';
  document.getElementById('element1').style.display ='none';
  document.getElementById('element2').style.display ='none';
  document.getElementById('element3').style.display ='none';
  document.getElementById('element4').style.display ='none';
  document.getElementById('element5').style.display ='none';
  document.getElementById('subelement1').style.display ='block';
  document.getElementById('subelement2').style.display ='block';
  document.getElementById('subelement3').style.display ='block';
}

function triggerBack(){
  document.getElementById('trigger1').style.display ='block';
  document.getElementById('trigger2').style.display ='block';
  document.getElementById('trigger3').style.display ='block';
  document.getElementById('element1').style.display ='none';
  document.getElementById('element2').style.display ='none';
  document.getElementById('element3').style.display ='none';
  document.getElementById('element4').style.display ='none';
  document.getElementById('element5').style.display ='none';
  document.getElementById('subelement1').style.display ='none';
  document.getElementById('subelement2').style.display ='none';
  document.getElementById('subelement3').style.display ='none';
}

#trigger1 { display: block; background-color: red; }
#trigger2 { display: block; background-color: blue; }
#trigger3 { display: block; background-color: yellow; }

#element1 { display: none; background-color: purple; }
#element2 { display: none; background-color: green; }
#element3 { display: none; background-color: cyan; }
#element4 { display: none; background-color: violet; }
#element5 { display: none; background-color: magenta; }

#subelement1 { display: none; background-color: orange; }
#subelement2 { display: none; background-color: lightblue; }
#subelement3 { display: none; background-color: lightgreen; }

.container { width: 100%; }
.wrapper {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.group {
    width: 100%;
    float: left;
    display: inline-block;
}
.element {
    height: 50px;
    width: 25%;
    float: left;
    display: inline-block;
}
button {
    height: 20px;
    width: 100px;
    background-color: black;
    color: white;
}

<div class="container">
  <div class="wrapper">
    <div class="group">
      <div class="element" id="trigger1" onClick="trigger1();"></div>
      <div class="element" id="trigger2" onClick="trigger2();"></div>
      <div class="element" id="trigger3" onClick="trigger3();"></div>
    </div>
    <div class="group">
      <div class="element" id="element1" onClick="trigger4();"></div>
      <div class="element" id="element2" onClick="trigger5();"></div>
      <div class="element" id="element3" onClick="trigger6();"></div>
      <div class="element" id="element4"></div>
      <div class="element" id="element5"></div>
    </div>
    <div class="group">
      <div class="element" id="subelement1"></div>
      <div class="element" id="subelement2"></div>
      <div class="element" id="subelement3"></div>
    </div>
    <div class="group">
      <button id="reset" onClick="triggerBack();">Back to start</button>
    </div>
  </div>
</div>

Answer 1

实现 DRY 的一种方法是将元数据存储在每个元素上，这些元数据控制应显示 .group 中的 .element 个元素。为此，您可以使用两个数据属性，每个属性都包含要显示的 group/elements 的索引。

当您用 jQuery 标记问题时，试试这个：

$('.element[data-element-index], #reset[data-element-index]').on('click', e => {  
  e.preventDefault();  
  $('.group, .element').hide();
  
  let $el = $(e.target);  
  let $group = $('.group').eq($el.data('group-index')).show();
  $group.find('.element').filter((i, el) => $el.data('element-index').indexOf($(el).index()) != -1).show();
});

.container {
  width: 100%;
}

.wrapper {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.group {
  width: 100%;
  float: left;
  display: inline-block;
}

.group .trigger { display: block; }
#trigger1 { background-color: red; }
#trigger2 { background-color: blue; }
#trigger3 { background-color: yellow; }

.element {
  height: 50px;
  width: 25%;
  float: left;
  display: none;
}
#element1 { background-color: purple; }
#element2 { background-color: green; }
#element3 { background-color: cyan; }
#element4 { background-color: violet; }
#element5 { background-color: magenta; }

#subelement1 { background-color: orange; }
#subelement2 { background-color: lightblue; }
#subelement3 { background-color: lightgreen; }

button {
  height: 20px;
  width: 100px;
  background-color: black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="wrapper">
    <div class="group">
      <div class="element trigger" id="trigger1" data-group-index="1" data-element-index="[0,1,2]"></div>
      <div class="element trigger" id="trigger2" data-group-index="1" data-element-index="[3,4]"></div>
      <div class="element trigger" id="trigger3" data-group-index="1" data-element-index="[0,2,3]"></div>
    </div>
    <div class="group">
      <div class="element" id="element1" data-group-index="2" data-element-index="[0,1]"></div>
      <div class="element" id="element2" data-group-index="2" data-element-index="[1,2]"></div>
      <div class="element" id="element3" data-group-index="2" data-element-index="[0,1,2]"></div>
      <div class="element" id="element4"></div>
      <div class="element" id="element5"></div>
    </div>
    <div class="group">
      <div class="element" id="subelement1"></div>
      <div class="element" id="subelement2"></div>
      <div class="element" id="subelement3"></div>
    </div>
    <div>
      <button id="reset" data-group-index="0" data-element-index="[0,1,2]">Back to start</button>
    </div>
  </div>
</div>

另请注意，我稍微整理了 CSS 以将其擦干。

Answer 2

您可以尝试使用 jQuery 并通过 class 隐藏元素，这样您就不必通过 id 隐藏所有内容，或者您是否必须严格使用 vanillaJS？

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".stuff").hide();
  });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p class="stuff">This is a paragraph.</p>
<p class="stuff">This is another paragraph.</p>
<p>this is a different paragraph, that won't be hidden on click</p>

<button>Click me to hide paragraphs</button>

</body>
</html>

Answer 3

您可以使用 classes 来做到这一点。根据状态将 class 添加到顶级元素。默认情况下隐藏所有元素。只需在 CSS 中定义在每个状态下哪些元素是可见的。

function trigger1(){
  document.getElementById('container').className = 'container state1';
}
function trigger2(){
  document.getElementById('container').className = 'container state2';
}
function trigger3(){
  document.getElementById('container').className = 'container state3';
}
function trigger4(){
  document.getElementById('container').className = 'container state4';
}
function trigger5(){
  document.getElementById('container').className = 'container state5';
}
function trigger6(){
  document.getElementById('container').className = 'container state6';
}

function triggerBack(){
  document.getElementById('container').className = 'container initial';
}

#trigger1 { display: none; background-color: red; }
#trigger2 { display: none; background-color: blue; }
#trigger3 { display: none; background-color: yellow; }

#element1 { display: none; background-color: purple; }
#element2 { display: none; background-color: green; }
#element3 { display: none; background-color: cyan; }
#element4 { display: none; background-color: violet; }
#element5 { display: none; background-color: magenta; }

#subelement1 { display: none; background-color: orange; }
#subelement2 { display: none; background-color: lightblue; }
#subelement3 { display: none; background-color: lightgreen; }

.container { width: 100%; }
.wrapper {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.group {
    width: 100%;
    float: left;
    display: inline-block;
}
.element {
    height: 50px;
    width: 25%;
    float: left;
    display: inline-block;
}
button {
    height: 20px;
    width: 100px;
    background-color: black;
    color: white;
}


.state1 #element1,
.state1 #element2,
.state1 #element3 {
  display: block;
}

.state2 #element4,
.state2 #element5 {
  display: block;
}

.state3 #element1,
.state3 #element3,
.state3 #element4 {
  display: block;
}

.state4 #subelement1,
.state4 #subelement2 {
  display: block;
}

.state5 #subelement2,
.state5 #subelement3 {
  display: block;
}

.state6 #subelement1,
.state6 #subelement2,
.state6 #subelement3 {
  display: block;
}

.initial #trigger1,
.initial #trigger2,
.initial #trigger3 {
  display: block;
}

<div id="container" class="container initial">
  <div class="wrapper">
    <div class="group">
      <div class="element" id="trigger1" onClick="trigger1();"></div>
      <div class="element" id="trigger2" onClick="trigger2();"></div>
      <div class="element" id="trigger3" onClick="trigger3();"></div>
    </div>
    <div class="group">
      <div class="element" id="element1" onClick="trigger4();"></div>
      <div class="element" id="element2" onClick="trigger5();"></div>
      <div class="element" id="element3" onClick="trigger6();"></div>
      <div class="element" id="element4"></div>
      <div class="element" id="element5"></div>
    </div>
    <div class="group">
      <div class="element" id="subelement1"></div>
      <div class="element" id="subelement2"></div>
      <div class="element" id="subelement3"></div>
    </div>
    <div class="group">
      <button id="reset" onClick="triggerBack();">Back to start</button>
    </div>
  </div>
</div>

或者，如果您仍然需要使用 javascript 执行此操作，您可以执行类似的操作：

function hide(ids){
  ids.forEach(id => {
    document.getElementById(id).style.display ='none';
  });
}

function show(ids){
  ids.forEach(id => {
    document.getElementById(id).style.display ='block';
  });
}

function trigger1(){
  hide([
    'trigger1',
    'trigger2',
    'trigger3',
    'element4',
    'element5',
    'subelement1',
    'subelement2',
    'subelement3'
  ]);
  show([
    'element1',
    'element2',
    'element3'
  ]);
}

如何在不同的点击中显示和隐藏多个不同的元素？

How do you show and hide multiple different elements on different clicks?

javascript

css

jquery

show-hide