jquery - 为什么 Modal Popup with Jekyll 和 bootstrap 只显示最后一个 child 的内容？

Question

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

下面是我正在处理的元素的一些代码。我究竟做错了什么？

在此先感谢您的所有帮助!

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>