在每个实例的属性中定义了目标元素的多个语义用户界面弹出窗口 [英] multiple semantic-ui popups with target element defined in atribute of each instance

问题描述

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

I have succesfully defined a popup for a clickable link element:

元素:

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

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

The script which triggers my popup (note the commented lines!)

$('[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
});

弹出窗口本身(无关):

The popup itself (irrelevant):

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

要做

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

TO DO

Now the popup works well ONLY when the ID of target content is pointed directly, but... I am about to put about 10 more popups and I want to use the same script to trigger them. How I can point to the proper popup depending on the value of data-tcs attribute? My attempts were friutless.

感谢所有帮助.

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

推荐答案

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

Whenever you need to pass instance specific data to any plugin options the easiest way is to wrap the initialization in an each loop

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

Then the each loop will expose the instance as this.

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

When you are trying to use this currently it is the window not the element

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

这篇关于在每个实例的属性中定义了目标元素的多个语义用户界面弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！