Question

我正在尝试添加一个类，以便在单击父级时使子级 .modal-container 可见，这可行，但代码的第二部分似乎不起作用。例如当我点击右上角的 X 符号 .close-modal 时，模态不会消失。

代码如下：

$(".animals-images").on('click', function() {
    $(this).find(".modal-container").addClass("show");
  });

$(".close-modal").on('click', function() {
    $(this).parent(".modal-right").parent(".modal").parent(".modal-container").removeClass("show");
  });

CSS 上的 .show 类样式如下所示：

.modal-container.show {
    opacity: 1;
    pointer-events: auto;
    transition: all 0.4s ease;
}

如果在 jQuery 代码的最后一部分我把 CSS ("opacity", "0"); 而不是 removeClass 它工作（但显然只有一次）。所以我不太明白这里有什么问题。

我想用普通的 JavaScript 来做这件事，所以如果你知道如何做到这一点，我将不胜感激！

HTML：

<div class="animals-images">
                <img src="./bianca.jpg"  class="animals-pictures" alt="">
                <div class="button-container">
                    <button class="click-me">Click Me!</button>
                </div>
                <div class="modal-container">
                    <div class="modal">
                        <div class="modal-left" style="background-image: url(./piggy.jpg);">
                        </div>
                        <div class="modal-right">
                            <h2>Bianca</h2>
                            <button class="close-modal">X</button>
                            <p class="modal-paragraph">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, enim!
                                Aut odio nobis vitae tenetur assumenda sit enim quo explicabo!
                                Unde quaerat nisi ea minus laudantium voluptatibus ipsum qui quis!
                            </p>
                        </div>
                    </div>
                </div>
            </div>

考虑到这重复了 10 次（对于 10 个不同的图像/模态），我试图找到一种方法来用几行代码来做到这一点，而不是单独选择 10 次

Answer 1

更新（基于 OP 评论）

<块引用>

感谢@dippas 的回答，有什么方法可以使此代码适用于许多其他图像吗？

您必须遍历每个按钮，然后在每个事件 (show) 上切换类 e.currentTarget

const buttonsOpen = document.querySelectorAll('.click-me'),
  buttonsClose = document.querySelectorAll('.close-modal')

buttonsOpen.forEach(el => el.addEventListener('click', e => e.currentTarget.parentElement.nextElementSibling.classList.add('show')))

buttonsClose.forEach(el => el.addEventListener('click', e => e.currentTarget.closest('.modal-container').classList.remove('show')))

.modal-container {
  display: none
}

.modal-container.show {
  display: block
}

<div class="animals-images">
  <img src="./bianca.jpg" class="animals-pictures" alt="">
  <div class="button-container">
    <button class="click-me">Click Me!</button>
  </div>
  <div class="modal-container">
    <div class="modal">
      <div class="modal-left" style="background-image: url(./piggy.jpg);">
      </div>
      <div class="modal-right">
        <h2>Bianca</h2>
        <button class="close-modal">X</button>
        <p class="modal-paragraph">
          Modal 1
        </p>
      </div>
    </div>
  </div>
</div>

<hr />

<div class="animals-images">
  <img src="./bianca.jpg" class="animals-pictures" alt="">
  <div class="button-container">
    <button class="click-me">Click Me!</button>
  </div>
  <div class="modal-container">
    <div class="modal">
      <div class="modal-left" style="background-image: url(./piggy.jpg);">
      </div>
      <div class="modal-right">
        <h2>Bianca</h2>
        <button class="close-modal">X</button>
        <p class="modal-paragraph">
          Modal 2
        </p>
      </div>
    </div>
  </div>
</div>

这是一个使用 vanilla JS 的简单解决方案

const buttonOpen = document.querySelector('.click-me'),
  buttonClose = document.querySelector('.close-modal'),
  modal = document.querySelector('.modal-container')

buttonOpen.addEventListener('click', () => modal.classList.add('show'))

//this
//buttonClose.addEventListener('click', () => modal.classList.remove('show'))

//or this
buttonClose.addEventListener('click', e => e.currentTarget.closest('.modal-container').classList.remove('show'))

.modal-container {
  display: none
}

.modal-container.show {
 display: block 
}

<div class="animals-images">
  <img src="./bianca.jpg" class="animals-pictures" alt="">
  <div class="button-container">
    <button class="click-me">Click Me!</button>
  </div>
  <div class="modal-container">
    <div class="modal">
      <div class="modal-left" style="background-image: url(./piggy.jpg);">
      </div>
      <div class="modal-right">
        <h2>Bianca</h2>
        <button class="close-modal">X</button>
        <p class="modal-paragraph">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, enim! Aut odio nobis vitae tenetur assumenda sit enim quo explicabo! Unde quaerat nisi ea minus laudantium voluptatibus ipsum qui quis!
        </p>
      </div>
    </div>
  </div>
</div>

单击按钮打开模态，单击关闭按钮隐藏模态

1 个答案: