如何更改模式內容（無引導）

Question

我有一堆都觸發相同模式的內容。 還有另一種方法可以改變模式，而無需在HTML中重復相同的代碼？

我嘗試使用event.relatedTarget，但沒有成功。

同樣，模態由另一個具有id modalBtn的 div觸發。

var modal = document.getElementById('modalSpeaker');
var modalBtn = document.getElementById('modalBtn');
var closeBtn = document.getElementsByClassName('closeBtn')[0];

modalBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);

function openModal() {
  modal.style.display = 'block';
}

function closeModal() {
  modal.style.display = 'none';
}

    <div id="modalSpeaker" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span class="closeBtn">&times;</span>
            </div>
            <div class="modal-body">
                <div class="modal-info">
                    <img src="images/speakers/speaker01.png" alt="">
                    <h3>Title</h3>
                    <span>About 01</span>
                    <span>About 02</span>
                </div>
                <div class="modal-about">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam amet consequatur, asperiores blanditiis quis nobis quaerat non aperiam doloribus quae, voluptatibus fuga voluptate porro dolorum velit eaque fugiat autem. Aut.
                    </p>
                    <p>
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi animi non odit eaque, tempora et fugit vitae officia similique quidem, officiis quisquam esse ipsa enim numquam distinctio sapiente nostrum ratione.
                    </p>
                </div>
            </div>
        </div>
    </div>

Answer 1

您可以為事件偵聽器使用代理方法或lambda表達式（或匿名函數），並將參數傳遞給模式顯示函數，以更改模式元素中的內容。

將函數注冊為EventListener的回調時，必須提供函數引用，但不能直接調用它。 這是因為一旦觸發了實際事件， EventListener就會調用該函數。 就調用回調函數的可變性而言，這會限制您的選擇。

如果傳遞一個lambda表達式而不是傳遞函數引用，則可以在lambda表達式內調用任何所需的東西，並且僅在觸發事件時調用lambda時才執行。

這使您可以靈活地定義具有復雜參數簽名的方法，這些方法可以在觸發事件時執行，但為每個唯一事件傳遞不同的參數。

還有其他幾種方法可以執行此操作，但是我認為這是完成任務的最干凈的方法。

下面的示例顯示了如何完成此操作：

 const modal = document.getElementById('modal'); const title = document.querySelector('#modal .title'); function openModal(color) { title.innerText = `Selected color: ${color}`; modal.style.display = 'block'; } function closeModal() { modal.style.display = 'none'; } document.getElementById('modal-close').addEventListener('click', closeModal); const buttonG = document.getElementById('g-btn'); const buttonR = document.getElementById('r-btn'); const buttonB = document.getElementById('b-btn'); buttonG.addEventListener('click', () => openModal('Green')); buttonR.addEventListener('click', () => openModal('Red')); buttonB.addEventListener('click', () => openModal('Blue')); 

 div#modal { position: absolute; top: 0; left: 0; width: 300px; height: 100px; background: whitesmoke; display: none; } 

 <div id="container"> <span class="title">Click one of the buttons to see the effect...</span> </div> <div id="modal"> <div class="title"></div> <button type="button" id="modal-close">Close</button> </div> <button id="g-btn" type="button">Green</button> <button id="r-btn" type="button">Red</button> <button id="b-btn" type="button">Blue</button>