按下不同按钮时如何更改模态内容

Question

How to change the modal content if I click different buttons.如果我单击不同的按钮，如何更改模式内容。 Because I tried to figure it out but it didn't work.因为我试图弄清楚它，但它没有用。 It showed the modal content 1 in all buttons.它在所有按钮中显示了模态内容 1。

<div class="showmodal">
        <button class="show-modal">Show modal 1</button>
        <button class="show-modal">Show modal 2</button>
        <button class="show-modal">Show modal 3</button>
     </div>

      <div class="modal hidden">
        <button class="close-modal">X</button>
         <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
          veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
          velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
          occaecat cupidatat non proident, sunt in culpa qui officia deserunt
          mollit anim id est laborum.
        </p>
    </div>
    <div class="modal hidden">
      <button class="close-modal">X</button>
       <p>
        jjjjjqui officia deserunt
        mollit anim id est laborum.
      </p>
    </div>
    <div class="modal hidden">
      <button class="close-modal">X</button>
       <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       in culpa qui officia deserunt
        mollit anim id est laborum.ff
      </p>
  </div>
      <div class="overlay hidden"></div>

</div>

This is the whole code:这是整个代码：

https://codepen.io/jujuju12/pen/XWMzPBe https://codepen.io/jujuju12/pen/XWMzPBe

Answer 1

I'm not sure if that's the way you want it, but I've modified the code.我不确定这是否是您想要的方式，但我已经修改了代码。

i used event delegation.我使用了事件委托。 Instead of adding an event to each button, the event is detected in the parent node.不是向每个按钮添加事件，而是在父节点中检测事件。
i have modified some HTML and javascript code.我修改了一些 HTML 和 javascript 代码。

<html>
<body>
       <h2>How To Play This Game</h2>

      <div class="showmodal">
        <button class="show-modal" data-id="0">Show modal 1</button>
        <button class="show-modal" data-id="1">Show modal 2</button>
        <button class="show-modal" data-id="2">Show modal 3</button>
     </div>

      <div class="modal hidden">
        <button class="close-modal">X</button>
         <p class="modal-content">
         content 1
        </p>
      </div>
      <div class="overlay hidden"></div>

  <script src="game.js" type="text/javascript"></script>
</body>
</html>

'use strict';
const modalData = ['content1', 'content2', 'content3'];
const $modalContainer = document.querySelector('.showmodal');

const $modal = document.querySelector('.modal');
const $content = document.querySelector('.modal-content');
const $overlay = document.querySelector('.overlay');
const $btnCloseModal = document.querySelector('.close-modal');

console.log($btnCloseModal);

$modalContainer.addEventListener('click', e => {
  
  const { id } = e.target.dataset;
  
  $content.innerText = modalData[id];
  $modal.classList.remove('hidden');
  $overlay.classList.remove('hidden');
});

$btnCloseModal.addEventListener('click', () => {
  
  $modal.classList.add('hidden');
  $overlay.classList.add('hidden');
});

I hope this was the answer you were looking for.我希望这是您正在寻找的答案。 Thank you.谢谢你。

按下不同按钮时如何更改模态内容

问题描述

1 个解决方案

解决方案1
0 2021-05-31 06:00:11

按下不同按钮时如何更改模态内容

问题描述

1 个解决方案

解决方案1 0 2021-05-31 06:00:11

解决方案1
0 2021-05-31 06:00:11