javascript - 如何使用 3 个按钮隐藏 3 个不同的文本并使用另外 3 个按钮显示相同的 3 个文本？

Question

function hide(id) {
  //hide () is the onclick function used to hide the corresponding text when button is clicked//
  //id represent the id of the button clicked//
  var buton = document.getElementsByName('btnName');
  //btnName is the name of 3 button used to hide text//
  var text = document.getElementsByName('txtName');
  //txtName is the name of 3 text want to be hide when button clicked//
  for (var i = 0; i < buton.length; i++) {
    if (id == buton[i].id) {
      // checking that the id is equal to the id of the button//
      document.getElementById(text[i].id).style.display = "none";
    }
  }
}

function show(id) {
  //hide () is the onclick function used to show the corresponding text when button is clicked//
  //id represent the id of the button clicked//
  var buton = document.getElementsByName('btnName1');
  //btnName1 is the name of 3 button used to show text//
  var text = document.getElementsByName('txtName');
  //txtName is the name of 3 text want to be displayed when button clicked//
  for (var i = 0; i < buton.length; i++) {
    if (id == buton[i].id) {
      // checking that the id is equal to the id of the button//
      document.getElementById(text[i].id).style.display = "block";
    }
  }
}

// 3 buttons to hide the 3 text//
<button id="butone" name="btnName" onclick="hide(this.id)">onehide</button>
<button id="buttwo" name="btnName" onclick="hide(this.id)">twohide</button>
<button id="butthree" name="btnName" onclick="hide(this.id)">threehide</button> 

<br>

// 3 buttons to show the 3 text//
<button id="butfour" name="btnName1" onclick="show(this.id)">oneshow</button>
<button id="butfive" name="btnName1" onclick="show(this.id)">twoshow</button>
<button id="butsix" name="btnName1" onclick="show(this.id)">threeshow</button>

<p id="one" name="txtName">button 1</p>
<p id="two" name="txtName">button 2</p>
<p id="three" name="txtName">button 3</p>

我已经这样做了，但这不起作用。我有 2 个 onclick 函数 show() 和 hide() 分别用于显示和隐藏 3 个文本。为了隐藏，我们有 3 个按钮，为了显示文本，我们还有另外 3 个按钮

Answer 1

如果按钮多一点的话，编辑代码会很累)
为每个组使用一个通用类，并从 querySelectorAll 循环遍历元素列表:

let bubu = document.querySelectorAll('.bubu');
let hide = document.querySelectorAll('.hide');
let show = document.querySelectorAll('.show');
// get element lists

for( let i = 0; i < hide.length; i++ ){
  // all of them have the same length → you can use only one loop for all.
  // inside the loop, `i` is a concrete number, which can be used to
  // get the required elements from each group.

  hide[i].addEventListener('click', function(){
    bubu[i].style.display = "none";
  });
  
  show[i].addEventListener('click', function(){
    bubu[i].style.display = "block";
  });
}

<button class="hide">onehide</button>
<button class="hide">twohide</button>
<button class="hide">threehide</button>

<hr>

<button class="show">oneshow</button>
<button class="show">twoshow</button>
<button class="show">threeshow</button>

<p class="bubu">one</p>
<p class="bubu">two</p>
<p class="bubu">three</p>

或者，也许更好 - 只有一个切换按钮组:

let bubu = document.querySelectorAll('.bubu');
let toggle = document.querySelectorAll('.toggle');

for( let i = 0; i < toggle.length; i++ ){  
  toggle[i].addEventListener('click', function(){  
    bubu[i].classList.toggle('hidden');
    toggle[i].classList.toggle('show');
  });
}

.toggle:before { content: "hide"; }
.toggle.show:before { content: "show"; }

.bubu.hidden { display: none; }

<button class="toggle">one</button>
<button class="toggle">two</button>
<button class="toggle">three</button>

<p class="bubu">one</p>
<p class="bubu">two</p>
<p class="bubu">three</p>