несколько всплывающих окон семантического пользовательского интерфейса с целевым элементом, определенным в атрибуте каждого экземпляра

Я успешно определил всплывающее окно для интерактивного элемента ссылки:

Элемент:

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

TO DO

Теперь всплывающее окно хорошо работает ТОЛЬКО при прямом указании идентификатора целевого контента, но ... Я собираюсь разместить еще около 10 всплывающих окон и хочу использовать тот же сценарий для их запуска. Как я могу указать на нужное всплывающее окно в зависимости от значения атрибута data-tcs? Мои попытки оказались безрезультатными.

Спасибо за помощь.

Документы находятся здесь: http://semantic-ui.com/modules/popup.html#/examples


javascript jquery syntax popup semantic-ui
person Peter    schedule 30.01.2016    source источник
comment
Я почти уверен, что вы можете использовать селектор классов, а затем сузить его, используя $(this), судя по документации.   -  person Rasclatt    schedule 30.01.2016
comment
На самом деле главным селектором может быть класс, часть $('[data-tcs]).   -  person Rasclatt    schedule 30.01.2016

Ответы (1)


arrow_upward
3
arrow_downward

Всякий раз, когда вам нужно передать данные конкретного экземпляра в какие-либо параметры плагина, самый простой способ - обернуть инициализацию в цикл 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
  });
});
person charlietfl    schedule 30.01.2016
comment
Прекрасно работает! Спасибо! - person Peter; 30.01.2016