javascript - 具有相同名称的多个按钮显示不同的 div

Question

我有大量的按钮都用来在它前面显示一个 div，我的问题是不是有 20 个不同的 javascript 函数都做同样的事情，是否可以用一个来做？默认情况下，我在 CSS 中将显示设置为无。

HTML:

<div class="col-lg-6 event-title">
    <span>Special Olympics Unified Snowboarding Final</span>
    <dd>SLOPESTYLE</dd>

    <div id ="#dropdown">
        <h6>2016 RESULTS</h6>
        <p>
         GOLD - Chris Klug & Henry Meece<br>
         SILVER - Danny Davis & Zach Elder<br>
         BRONZE - Hannah teter & Daina Shilts
         </p>
    </div>
</div>

<div class="col-lg-1">
    <button type="button" id = "#drop-button" class="btn btn-default btn-lrg">&#x25BC</button>
</div>

<div class="col-lg-6 event-title">
    <span>Special Olympics Unified Snowboarding Final</span>
    <dd>SLOPESTYLE</dd>

    <div id ="#dropdown1">
        <h6>2016 RESULTS</h6>
        <p>
         GOLD - Chris Klug & Henry Meece<br>
         SILVER - Danny Davis & Zach Elder<br>
         BRONZE - Hannah teter & Daina Shilts
         </p>
    </div>
</div>

<div class="col-lg-1">
    <button type="button" id = "#drop-button1" class="btn btn-default btn-lrg">&#x25BC</button>
</div>

JavaScript:

document.getElementById("#drop-button").addEventListener("click", function(){
    document.getElementById("#dropdown").style.display="block";
});

document.getElementById("#drop-button1").addEventListener("click", function(){
    document.getElementById("#dropdown1").style.display="block";
});

Answer 1

为什么要使用 id？ID 是唯一的，对于多个 ID，您应该改用类。