使用WP Job Manager插件的警报扩展。将显示用户创建的警报列表，其中包含每个警报的一些信息。我想在弹出窗口中显示信息，而不是在列表中。创建了一个按钮，单击该按钮可打开弹出窗口，其中包含与特定警报相关的信息。

它通常可以工作，但问题是，无论我单击哪个按钮（对于警报1、警报2、警报3等），它都会打开警报1的弹出窗口。

如何仅对相关项目应用效果？试着玩弄.closest() 但不起作用，或者我没有正确使用它。已经在谷歌上搜索了几个小时，试图找到一种为每个警报分配唯一ID的方法（我无法预先定义它们，因为每个用户都有不同数量的警报条目）

Example HTML

<td>
    <h4>Alert #1</h4>
    <a href="#" class="open-alert-popup" data-id="popup_alerts" data-animation="flipAlertsRight">Open Button</a>
      <!- below div is hidden till above link is clicked ->     
      <div id="popup_alerts" class="alert-popup" style="display: none;">
         <div class="alert-popup-overlay"></div>
         <div class="alert-popup-content">
            <a href="#" class="close-alert-popup" data-id="popup_alerts" data-animation="flipAlertsRight">Close Button</a>
                <!- some popup content here ->
         </div>
      </div>
</td>
<td>
    <h4>Alert #2</h4>
    <a href="#" class="open-alert-popup" data-id="popup_alerts" data-animation="flipAlertsRight">Open Button</a>
      <!- below div is hidden till above link is clicked ->     
      <div id="popup_alerts" class="alert-popup" style="display: none;">
         <div class="alert-popup-overlay"></div>
         <div class="alert-popup-content">
            <a href="#" class="close-alert-popup" data-id="popup_alerts" data-animation="flipAlertsRight">Close Button</a>
                <!- some popup content here ->
         </div>
      </div>
</td>
<td>
    <h4>Alert #3</h4>
    <a href="#" class="open-alert-popup" data-id="popup_alerts" data-animation="flipAlertsRight">Open Button</a>
      <!- below div is hidden till above link is clicked ->     
      <div id="popup_alerts" class="alert-popup" style="display: none;">
         <div class="alert-popup-overlay"></div>
         <div class="alert-popup-content">
            <a href="#" class="close-alert-popup" data-id="popup_alerts" data-animation="flipAlertsRight">Close Button</a>
                <!- some popup content here ->
         </div>
      </div>
</td>

CSS

.alert-popup {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
}
.alert-popup-overlay {
    /* some styling for popup overlay */
}
.alert-popup-content {
    /* some styling for popup content */
}
.close-alert-popup {
    /* some styling for popup close button */
}
.flipAlertsRightIn {
    /* some styling for popup animation */
}
@keyframes flipAlertsRightIn {
    /* keyframes for the animation */
}

jQuery

(function($) {
  $.fn.openPopup = function( settings ) {
    var elem = $(this);
    // Establish default settings
    var settings = $.extend({
      anim: \'fade\'
    }, settings);
    elem.show();
    elem.find(\'.alert-popup-content\').addClass(settings.anim+\'In\');
  }

  $.fn.closePopup = function( settings ) {
    var elem = $(this);
    // Establish default settings
    var settings = $.extend({
      anim: \'fade\'
    }, settings);
    elem.find(\'.alert-popup-content\').removeClass(settings.anim+\'In\').addClass(settings.anim+\'Out\');

    setTimeout(function(){
        elem.hide();
        elem.find(\'.alert-popup-content\').removeClass(settings.anim+\'Out\')
      }, 500);
  }

}(jQuery));

// Click functions for popup
$(\'.open-alert-popup\').click(function(){
  $(\'#\'+$(this).data(\'id\')).openPopup({
    anim: (!$(this).attr(\'data-animation\') || $(this).data(\'animation\') == null) ? \'fade\' : $(this).data(\'animation\')
  });
});
$(\'.close-alert-popup\').click(function(){
  $(\'#\'+$(this).data(\'id\')).closePopup({
    anim: (!$(this).attr(\'data-animation\') || $(this).data(\'animation\') == null) ? \'fade\' : $(this).data(\'animation\')
  });
});