为什么带有 Jekyll 和 bootsratp 的模态弹出窗口只显示最后一个孩子的内容?

Question

我正在尝试使用 jekyll 和引导程序构建一个模态弹出窗口。问题是每个弹出窗口仅显示循环信息中的最后一个子项，而不是该特定子项。我尝试了几种不同的想法来解决这个问题，但我似乎无法弄清楚。

以下是我为我正在处理的项目提供的一些代码。我做错了什么？

提前感谢所有的帮助！

.HTML：

{% for stone in site.data.stones %}
<div class="popup-content">
<h1>{{ stone.color }}</h1>
<button class="close">Close</button>
</div>
</div>
<div class="popup-hold">
<h1>{{ stone.gem }}</h1>
<button class="open">Open</button>
</div>
{% endfor %}

.CSS：

.popup-overlay {
visibility: hidden;
position: absolute;
background: grey;
height: 50%;
width: 50%;
left: 25%;
}
.popup-overlay.active {
visibility: visible;
z-index: 1;
}
.popup-content {
visibility: hidden;
}
.popup-content.active {
visibility: visible;
z-index: 1;
}
.popup-hold {
height: 330px;
border: 2px solid black;
}

石头.yml：

- gem: Mind
color: yellow
- gem: Time
color: green
- gem: Soul
color: orange

JQUERY：

$(document).ready(function(e) {
// adds "active" class to overlay and content
$(".open").on("click", function(){
$(".popup-overlay, .popup-content").addClass("active");
});
// removes "active" class from overlay and content
$(".close, .popup-overlay").on("click", function(){
$(".popup-overlay, .popup-content").removeClass("active");
});
});

Answer 1

你没有给我们全貌 - 所以很难提供帮助。

但是，我怀疑存在两 (2( 个不同的问题。

第一：在杰基尔循环中没有开<div class="pop-overlay>。

更改您的液体循环，以包括每颗宝石覆盖层的开口div：

{% for stone in site.data.stones %}
<div class="popup-overlay"> // Add this opening div
<div class="popup-content">
<h1>{{ stone.color }}</h1>
<button class="close">Close</button>
</div>
</div>
<div class="popup-hold">
<h1>{{ stone.gem }}</h1>
<button class="open">Open</button>
</div>
{% endfor %}

您可能需要在代码中的循环之前删除任何单独的打开div - 如果您有该div

。第二：让jquery只打开相关的(上一个(模态

这个问题是你的jquery正在打开页面上的所有模态 - 无论你点击哪个.open按钮。

您可能只能看到最后一个，因为它位于其他模态的"顶部" - 具体取决于您的样式。

尝试更改 jquery，以便当您单击.open按钮时，仅打开前面/关联的模态元素(而不是所有模态元素(。

尝试像这样的jquery：

<script>
$(document).ready(function(e) {
// adds "active" class to overlay and content
$(".open").on("click", function(){
$(this).parent().prev(".popup-overlay").addClass("active");
$(this).parent().prev(".popup-overlay").find(".popup-content").addClass("active");
});
// removes "active" class from overlay and content
$(".close").on("click", function(){
$(".popup-overlay, .popup-content").removeClass("active");
});
});
</script>

注意：单击任何关闭按钮时，此脚本将关闭所有打开的模式。

如果您只想关闭相关模态，那么您需要更改关闭操作，类似于我们对打开操作所做的操作 - 即仅选择相关模态。

我不得不猜测你是如何设置的，但我希望这有所帮助。

如果这不起作用，那么您应该提供完整的输出 html 或更好的工作示例。

这是我认为您希望它如何运行的演示：

$(document).ready(function(e) {
// adds "active" class to overlay and content
$(".open").on("click", function() {
$(this).parent().prev(".popup-overlay").addClass("active");
$(this).parent().prev(".popup-overlay").find(".popup-content").addClass("active");
});
// removes "active" class from overlay and content
$(".close").on("click", function() {
$(".popup-overlay, .popup-content").removeClass("active");
});
});

.popup-overlay {
visibility: hidden;
position: absolute;
background: grey;
height: 50%;
width: 50%;
left: 25%;
}
.popup-overlay.active {
visibility: visible;
z-index: 1;
}
.popup-content {
visibility: hidden;
}
.popup-content.active {
visibility: visible;
z-index: 1;
}
.popup-hold {
height: 330px;
border: 2px solid black;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup-overlay">
<div class="popup-content">
<h1>yellow</h1>
<button class="close">Close</button>
</div>
</div>
<div class="popup-hold">
<h1>Mind</h1>
<button class="open">Open</button>
</div>
<div class="popup-overlay">
<div class="popup-content">
<h1>Green</h1>
<button class="close">Close</button>
</div>
</div>
<div class="popup-hold">
<h1>Time</h1>
<button class="open">Open</button>
</div>
<div class="popup-overlay">
<div class="popup-content">
<h1>Orange</h1>
<button class="close">Close</button>
</div>
</div>
<div class="popup-hold">
<h1>Soul</h1>
<button class="open">Open</button>
</div>