在具有特定值的数据属性元素上使用 .addClass

Question

我正在尝试在 jQuery 中创建一个模态弹出系统，使代码尽可能简单。我查过这方面的教程，但它们都只显示它在 HTML 中使用一种模式。如果我在页面上有多个具有属性 data-popup 的模态框，我怎样才能只制作一个选定的弹出框？

这是我目前的尝试：

$("[data-popupBtn]").click(function() {
  if ($("[data-popupBtn='schedule']")) {
    $("[data-popup='schedule']").addClass("visible");
    $(".popup-bg").addClass("visible");
  } else {
    if ($("[data-popupBtn='booklet']")) {
      $("[data-popup='booklet']").addClass("visible");
      $(".popup-bg").addClass("visible");
    } else {
      null
    }
  }
})

HTML 为：

<div class="popup-bg">

  <div class="popup" data-popup="schedule">
    <a class="popup-x">&times;</a>
    <div>
      <p>CONTENT</p>
    </div>
  </div>

  <div class="popup" data-popup="booklet">
    <a class="popup-x">&times;</a>
    <div>
      <p>CONTENT</p>
    </div>
  </div>

</div>

我的目标是创建可以在页面上的任何地方使用的触发器，只要在元素中使用一个简单的 data-popupBtn="insertPopupType" 就可以使用多次。我目前拥有的代码可以完美地制作 data-popup="schedule" 弹出窗口...但是 jQuery 在检查 if ($("[data-popupBtn='schedule']")) 与 if ($("[data-popupBtn='booklet']")) 时似乎失败了。如果您有更好的方法在单个页面上合并多个模式弹出窗口，请告诉我。

Answer 1

<a class="btn" data-popup="schedule">Button for Schedule</a>
<a class="btn" data-popup="schedule">Button for Schedule</a>
<div class="popup-bg">

 <div class="popup" data-popup="schedule">
   <a class="popup-x">&times;</a>
  <div>
  <p>CONTENT Schedule</p>
</div>
</div>


<div class="popup" data-popup="booklet">
<a class="popup-x">&times;</a>
<div>
  <p>CONTENT</p>
</div>
</div>

</div>
$("[data-popup]").click(function() {
$(".popup-bg").addClass("visible");
$('[data-popup='+$(this).data('popup')+']').addClass('visible')

})

Answer 2

Louys Patrice Bessette 在评论中回答了我的问题！谢谢！

“不清楚如何单击不“可见”的“弹出窗口”...但是可以肯定的是，如果元素存在于页面。-- 也许您会对 jQuery .is() 感兴趣并创建类似 if ($(this).is($("[data-popupBtn='schedule']")) 的条件。尝试一下，如果您仍然有问题，请确保提供所有内容以重现该问题。 “ – Louys Patrice Bessette 12 月 10 日 17:54

在具有特定值的数据属性元素上使用 .addClass

Using .addClass on data-attribute elements with specific values

html

javascript

jquery

popup