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

【问题标题】：How do you show and hide multiple different elements on different clicks?如何在不同的点击中显示和隐藏多个不同的元素？
【发布时间】：2021-05-21 18:37:08
【问题描述】：

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

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>

【问题讨论】：

为什么是 jQuery 标签？我没有看到任何

标签： javascript jquery css show-hide

【解决方案1】：

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

当您使用 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 以使其干燥。

【讨论】：

组索引由data-group-index 属性和data-element-index 数组中的元素设置

【解决方案2】：

你可以通过类来做到这一点。根据它的状态将类添加到顶级元素。默认情况下，所有元素都是隐藏的。只需在 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'
  ]);
}

【讨论】：

【解决方案3】：

您可以尝试使用 jQuery 并按类隐藏元素，这样您就不必按 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>

【讨论】：