我正在尝试添加一个类,以便在单击父级时使子级 .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 次
答案 0 :(得分: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>