javascript - 将 Javascript 函数应用于多个按钮？

Question

我正在尝试将 JavaScript 函数应用于多个按钮，其中会弹出带有描述的视频。一个按钮可以工作，但另一个按钮不能工作。我尝试使用“onclick”并且有一个弹出窗口，但是它显示了第一个按钮的内容。 JavaScript 链接在一个单独的文件“popup.js”中。

HTML:

<div class="container">
    <div class="box" id="button">
        <a href="#" id="open">HURRICANE TRACK</a>
    </div>
    <div id="popup">
        <h2>HURRICANE TRACKING</h2>
        <video src="python_movies/hurricanetrack.mov" controls></video>
        <p>
            A Python project that prompts the user for a file containing hurricane information in order to form a
            dictionary that contains the names of hurricanes, the years the hurricanes occurred, and the
            correspoding data for each of the hurricanes, including the trajectory, longitude, lattitude, and wind
            speed. The program graphs all of the corresponding information by adding the information on a table,
            graphing the trajectory of the hurricanes, and plotting the information in a graph according to the wind
            speed.
        </p>
        <a href="#" id="close">CLOSE</a>
    </div>

    <div class="box" id="button">
        <a href="#" id="open">NINE MEN'S MORRIS</a>
    </div>
    <div id="popup">
        <h2>NINE MEN'S MORRIS</h2>
        <video src="python_movies/ninemensmorris.mov" controls></video>
        <p>
            A Python Projects that runs the game, Nine Men's Morris. Nine Men's Morris is a two player game that
            combines elements of tic-tac-toe and checkers. The board consists of a grid with twenty-four
            intersections or points. Each player has nine pieces. Players try to form 'mills'—three of their own men
            lined horizontally or vertically—allowing a player to remove an opponent's man from the game. A player
            wins by reducing the opponent to two pieces (where they could no longer form mills and thus be unable to
            win), or by leaving them without a legal move. The game proceeds in three phases:
        </p>
        <ul>
            <li>Placing pieces on vacant points</li>
            <li>Moving pieces to adjacent points</li>
            <li>(optional phase) Moving pieces to any vacant point when the player has been reduced to three men
            </li>
        </ul>
        <a href="#" id="close">CLOSE</a>
    </div>
</div>
<script src="js/popup.js"></script>

JavaScript:

function toggle() {
  var blur = document.getElementById('button');
  blur.classList.toggle('active');
  var popup = document.getElementById('popup');
  popup.classList.toggle('active');
}

document.querySelector("#open").onclick = toggle;
document.querySelector("#close").onclick = toggle;

Answer 1

id在整个文档中必须是唯一的。您可以使用class或不同的属性来选择多个节点。

// listener function
function handle_button_click() {
  console.log(this.innerText);
}

// add click events using `class`
const buttons = document.querySelectorAll('.button');
for (const button of buttons) {
  button.addEventListener('click', handle_button_click, false);
}

<button class="button">Button 1</button>
<button class="button">Button 2</button>

更新

对于弹出窗口来说，这将是完美的，

function handle_button_click() {
  const popups = document.querySelectorAll('.popup');
  const buttons = document.querySelectorAll('.button');

  popups.forEach(p => p.classList.remove('open'));
  buttons.forEach(b => b.classList.remove('active'));

  const popup = document.querySelector(this.dataset.popup);
  if (!popup) return;

  popup.classList.add('open');
  this.classList.add('active');
}

const buttons = document.querySelectorAll('.button');
for (const button of buttons) {
  button.addEventListener('click', handle_button_click, false);
}

.popup {
  display: none;
}

.open {
  display: block;
}

.active {
  color: cadetblue;
}

<button class="button" data-popup="#popup1">Button 1</button>
<button class="button" data-popup="#popup2">Button 2</button>

<div class="popup" id="popup1">Popup 1</div>
<div class="popup" id="popup2">Popup 2</div>