javascript - 让 Javascript 检查按下了哪个 Button 并用它更改特定的 HTML 详细信息

Question

在我的网站上，我有几个按钮可以打开或关闭特定的 HTML 详细信息。
我的按钮(我有更多):

 <button onClick="showdetail()" class="stage-detail">1</button>
 <button onClick="showdetail()" class="stage-detail">2</button>

我的详细信息(还有一些):

<details id="brock1"></details>
<details id="brock2"></details>

现在我想编写一个 Javascript 来检测哪个按钮被按下，然后打开或关闭正确的细节。

例如:
如果按下按钮 1:详细信息“brock1”应打开，详细信息“brock2”应关闭。
与 button2 正好相反。

我是这样开始的:

var i;
var detail = document.getElementsByClassName("stage-detail");

    for (i = 0; i < detail.length; i++){
        detail[i].addEventListener("click", function(){

        }
    }

现在我卡住了..
我的意思是我可以为每个按钮编写单独的函数，但这对我来说听起来很愚蠢，因为它们的功能几乎相同。

谁能帮帮我？

Answer 1

使用无限数量的<button>s等量的 <details>

Event Delegation

处理 无限数量 的 <button>s用单 EventListener :

1. 如果您没有在 <button>s 周围加上标签，就这样吧。 (section.buttons)。

2. 注册click事件到 <button>s 的父标签(section.buttons)。

3. 让回调函数 ( toggleDetails() ) 使用 event.target (单击 <button> )属性来确定哪个 <button>通过将其与 event.currentTarget 进行比较来点击(注册到点击事件的标签 -- section.buttons)。

---

[open] Attribute <details open>

<details>有一个名为 [open] 的属性当true (或就在那里)-- <details>是开放的，什么时候 false (或者只是不存在)，<details>已关闭。

---

"How can I use something different than the textContent for the num variable?"

<button>s可以收集然后编入索引，请参阅更新的演示 2。

演示1

demo中有详细说明。

// Reference the parent tag of <button>s
var btns = document.querySelector('.buttons');

// Register parent tag of <button>s to the click event
btns.addEventListener('click', toggleDetails);

// Callback function passes Event Object (e)
function toggleDetails(e) {
  // Reference clicked tag (ie <button>)
  var tgt = e.target;
  /*
  if clicked tag is NOT the registered tag (ie section.buttons)...
  ...get the text of clicked <button> (ie a number)...
  ...then reference the tag with the #id of "brock"+a number which
  will end up to be a <details> tag.
  if this <details> tag has an [open] attribute...
  ...remove it...
  otherwise...
  ...add it and set it to true.
  */
  if (tgt !== e.currentTarget) {
    var num = tgt.textContent;
    var dtl = document.getElementById('brock' + num);
    if (dtl.getAttribute('open')) {
      dtl.removeAttribute('open');
    } else {
      dtl.setAttribute('open', true);
    }
  }
}

<!--Wrap <button>s in a tag-->
<section class='buttons'>
  <button class="stage-detail">1</button>
  <button class="stage-detail">2</button>
  <button class="stage-detail">3</button>
  <button class="stage-detail">4</button>
  <button class="stage-detail">5</button>
  <button class="stage-detail">6</button>
</section>

<details id="brock1">ONE</details>
<details id="brock2">TWO</details>
<details id="brock3">THREE</details>
<details id="brock4">FOUR</details>
<details id="brock5">FIVE</details>
<details id="brock6">SIX</details>

---

演示2

// Reference the parent tag of <button>s
var stage = document.querySelector('.stage');

// Register parent tag of <button>s to the click event
stage.addEventListener('click', toggleDetails);

// Callback function passes Event Object (e)
function toggleDetails(e) {
  // Reference clicked tag (ie <button>)
  var tgt = e.target;
  // Collect all <button>s into a NodeList
  var btns = document.querySelectorAll('button');
  // Declare variable
  var num;
  /*
  On each loop through NodeList...
  if there's a clicked <button>...
  ...assign the index number +1 to previous variable (num).
  */
  for (let i = 0; i < btns.length; i++) {
    if (btns[i] === tgt) {
      num = i + 1;
    }
  }
  /*
  if clicked tag is NOT the registered tag (ie section.buttons)...
  ...then reference the tag with the #id of "brock"+a number which
  will end up to be a <details> tag.
  if this <details> tag has an [open] attribute...
  ...remove it...
  otherwise...
  ...add it and set it to true.
  */
  if (tgt !== e.currentTarget) {
    var dtl = document.getElementById('brock' + num);
    if (dtl.getAttribute('open')) {
      dtl.removeAttribute('open');
    } else {
      dtl.setAttribute('open', true);
    }
  }
}

<!--Wrap <button>s in a tag-->
<section class='stage'>
  <button class="stage-detail">1</button>
  <button class="stage-detail">2</button>
  <button class="stage-detail">3</button>
  <button class="stage-detail">4</button>
  <button class="stage-detail">5</button>
  <button class="stage-detail">6</button>
</section>

<details id="brock1">ONE</details>
<details id="brock2">TWO</details>
<details id="brock3">THREE</details>
<details id="brock4">FOUR</details>
<details id="brock5">FIVE</details>
<details id="brock6">SIX</details>