Блог

У меня есть некоторый javascript-код, который создает диалоговое окно, которое выглядит примерно так:

  $( function () {
    $('.hoverList').dialog({
    autoOpen: false,
    hide: {
        effect: "fade",
        duration: 400
    },
    title: $(this).data("title"),
    modal: false
});};
  

В этом случае на странице может быть несколько элементов класса hoverlist. Проблема, с которой я сталкиваюсь, связана с этой строкой в приведенном выше:

 title: $(this).data("title")
  

В моем pag div, содержащий мое диалоговое окно, выглядит следующим образом:

 <div class='hoverlist' data-title='My Dialog Title'>...</div>
  

Однако, когда выполняется javascript, $(this), возвращаемый в ключе ‘title:’ диалогового окна, ссылается на сам документ, а не на элемент, к которому применяется эта директива диалогового окна, поэтому данные («title») <div> элемента здесь недоступны.

Обратите внимание, что на одной странице может быть несколько списков наведения, поэтому я не могу просто выбрать его по идентификатору вместо класса без повторного создания одного и того же кода. Пытаюсь выяснить, как я могу создать диалоговое окно с заголовком, на который ссылается элемент данных <div> , который я превращаю в диалоговое окно. Как это может быть возможно?

Если вы хотите это сделать, то вам нужно выполнить цикл по объекту jQuery selector, чтобы ‘$(this)’ ссылался на текущий узел.

 $( function () {

    $('.hoverList').each(function(){
        $(this).dialog({
            autoOpen: false,
            hide: {
                effect: "fade",
                duration: 400
            },
            title: $(this).data("title"),
            modal: false
        });
    });
});