让Javascript检查按下了哪个按钮，并用它更改特定的HTML细节

在我的网站上，我有几个按钮可以打开或关闭特定的HTML细节
我的按钮（我还有很多）：

1
2.

我的详细信息（还有更多）：

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

例如：
如果按下按钮1：细节“brock1”应打开，细节“brock2”应关闭。
按钮2在正对面

我是这样开始的：

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

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

        }
    }

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


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

vari；
var detail=document.getElementsByClassName（“阶段细节”）；
对于（i=0；i

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

---

有人能帮我吗？

你如何制作

showdeail（）

获取一个决定按钮点击的输入

像这样使用它

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

1
2.

现在，在您的函数中，您可以通过查看输入准确地知道单击了哪个按钮。其余的是映射和切换。

您可以这样做：

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

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

        }
    }

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


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

1
2.

函数showdetail（id）{
让所选元素=document.getElementById（id）；
//对所选元素执行某些操作
警报（所选的元素。innerHTML）；
}

你能试试这个吗：

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

<script>
    function showdetail(btnnumber){
       console.log('you pressed the button: ' + btnnumber);
    }
</script>

1
2.
功能显示详细信息（btnnumber）{
log（'您按下按钮：'+btnnumber）；
}

使用不限数量的

s

到等量的

使用单个处理

s

的无限个：

如果您没有在

s

上缠绕标签，请这样做。（

部分.按钮

）

将

单击

事件注册到

s

（

部分.按钮

）的父标记

让回调函数（

toggleDetails（）

）使用（单击的

）属性，通过将其与（注册到单击事件--

部分的标记。按钮）进行比较来确定单击了哪个
）

---

有一个名为

[open]

的属性，当

为true

（或就在那里）打开且

为false

（或不在那里）时，

关闭

---

---

“如何为num变量使用与textContent不同的内容？”

可以收集

s

，然后编制索引，请参阅更新的演示2

演示1 详细信息将在演示中进行注释。

//引用s的父标记
var btns=document.querySelector（'.buttons'）；
//将s的父标记注册到click事件
btns.addEventListener（'click'，toggleDetails）；
//回调函数传递事件对象（e）
函数切换详细信息（e）{
//参考标签（ie）
var tgt=e.target；
/*
如果单击的标记不是已注册的标记（即节按钮）。。。
…获取已单击的文本（即数字）。。。
…然后使用#id“brock”+一个
最终将成为一个标签。
如果此标记具有[open]属性。。。
…移除它。。。
否则。。。
…添加它并将其设置为true。
*/
如果（tgt！==e.currentTarget）{
var num=tgt.textContent；
var dtl=document.getElementById（'brock'+num）；
if（dtl.getAttribute（'open'））{
dtl.removeAttribute（“打开”）；
}否则{
dtl.setAttribute（'open'，true）；
}
}
}

1.
2.
3.
4.
5.
6.
一个
两个
三
四
五
六个

如何访问这些输入？您的函数可能看起来像var showdeail=function（buttonId）{console.log（buttonId）；}我可以在if（btnumber=1）中使用btnnumber吗？@DieneMutter您知道如何实际打开

？请参阅我的答案。除了我的答案之外，还有其他答案吗实际打开和关闭任何

s

标记？是的，holydragon打开了1，但两个按钮打开的都是相同的。如何使用与num变量的文本内容不同的内容？@DieneMutter请参见演示2

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

<script>
    function showdetail(btnnumber){
       console.log('you pressed the button: ' + btnnumber);
    }
</script>