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>

如何更改模式内容（无引导）

1 个答案: