多个语义 UI 弹出窗口，其中目标元素在每个实例的 atribute 中定义

multiple semantic-ui popups with target element defined in atribute of each instance

本文关键字：元素 定义 atribute 目标 实例 UI 语义 窗口      更新时间：2023-09-26

我已经成功地为可点击的链接元素定义了一个弹出窗口：

元素：

`<a href="{{URL::to('alerts')}}" data-tcs="#popup-1">Alerts Page</a>`

触发我的弹出窗口的脚本(请注意注释的行！

$('[data-tcs]')
.popup({
// (default as in example provided on the S-UI, works well) 
// popup : $('#popup-1'),
// (attempt 1, doesn't work) 
// popup : $(this).data('tcs'),
// (attempt 2, doesn't work) 
    popup : $(this).attr('data-tcs'),
    on    : 'hover',
    delay: {
      show: 0,
      hide: 500
    },
    hoverable: true
});

弹出窗口本身(无关紧要(：

<div class="ui popup" id="popup-1"> 
  <h3>TANJ!</h3> 
  </div>

待办事项

现在，仅当目标内容的ID直接指向时，弹出窗口才能正常工作，但是...我即将再放置大约 10 个弹出窗口，我想使用相同的脚本来触发它们。如何根据 data-tcs 属性的值指向正确的弹出窗口？我的尝试是轻率的。

感谢所有的帮助。

文档在这里：http://semantic-ui.com/modules/popup.html#/examples

每当您需要将实例特定数据传递给任何插件选项时，最简单的方法是将初始化包装在each循环中

然后each循环会将实例公开为 this 。

当您尝试使用当前this时，它是window而不是元素

$('[data-tcs]').each(function() {
  var $el = $(this);
  $el.popup({    
    popup: $el.attr('data-tcs'),
    on: 'hover',
    delay: {
      show: 0,
      hide: 500
    },
    hoverable: true
  });
});
相关文章：