將 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在整個文檔中必須是唯一的。 您可以使用類或不同的屬性來選擇多個節點。

 // 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>

Answer 2

試試這個代碼而不是所有的 JavaScript 代碼：

$(function(){
    $('#button, #popup').click(function(){
        $('#button, #popup').removeClass('active');
        $(this).addClass('active');
    });
});