多个语义-ui 弹出窗口，每个实例的属性中定义了目标元素

Question

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

元素：

`<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

Answer 1

每当您需要将实例特定数据传递给任何插件选项时，最简单的方法是将初始化包装在 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
  });
});

多个语义-ui 弹出窗口，每个实例的属性中定义了目标元素

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

javascript

syntax

jquery

popup

semantic-ui

待办事项