Почему мой селектор jquery здесь не работает? - PullRequest
Новая
       11

Почему мой селектор jquery здесь не работает?

1 голос
/ 12 октября 2009

Я создаю небольшую динамическую функцию всплывающей подсказки.

В основном, если у меня есть такая ссылка: 

<a href="#" data="xyz">?</a>

Используя qTip, я пытаюсь найти таблицу подсказок в mysql и получить подсказку на основе данных в атрибуте data.

Итак: 

$('a[data]').qtip({ 
    content: {
       url: '/tooltip.php',
       data: { tipKey: $(this).attr('data') },
       method: 'post'
}
});

Проблема в том, что это не работает. $ (this) .attr ('data'), похоже, не извлекает значение внутри атрибута.

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

    $('a[data]').qtip({ 
    content: {
        url: '/tooltip.php',
        data: { tipKey: 'xyz' },
        method: 'post'
    }

});

Чего мне не хватает, когда я пытаюсь извлечь данные из атрибута данных? Должен ли я делать что-то вроде: 

    $('a[data]').qtip({ 
    content: {
        url: '/tooltip.php',
        data: { tipKey: ''+$(this).attr('data')+'' },
        method: 'post'
    }

});

Так как это тоже не дает значения!

Ответы [ 3 ]

4 голосов
/ 12 октября 2009

Ваш код не работает, потому что ключевое слово this представляет контекст выполняемой функции, и вы используете его внутри литерала объекта.

Например, если вы выполняете свой фрагмент в событии $(document).ready, ключевое слово this будет представлять элемент документа.

Вы можете перебрать по вашему селектору и инициализировать каждую подсказку элемента отдельно: 

$('a[data]').each(function () {
  var $link = $(this);
  $link.qtip({ 
      content: {
        url: '/tooltip.php',
        data: { tipKey: $link.attr('data') },
        method: 'post'
      }
  });
});

Также обратите внимание, что атрибут data не является стандартным, ваша страница не пройдет валидатор W3C .

1 голос
/ 12 октября 2009

Вы должны попытаться получить доступ к 0-му элементу данных. Как это: 

data: { tipKey: $("a[data]")[0].data},

РЕДАКТИРОВАТЬ: о хорошо, я вижу, это должно работать в качестве альтернативы.

1 голос
/ 12 октября 2009

Этот пример работает для меня: 

<html>
<head>
<title>Text</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  alert($("a[data]").text());
});
</script>
</head>
<body>
<a href="#" data="123">abc</a>
</body>
</html>
...