JQuery специальный символ в качестве seelector

0

Я пытаюсь получить простой hover чтобы работать на специальном символе в качестве селектора.

Я использую специальный символ с double-daggers (‡ ‡)

ASCII 8225 и хотите, чтобы они функционировали как подсказка, но у меня возникли проблемы с тем, чтобы заставить их запускать событие.

JSFiddle здесь с помощью действия click вместо зависания для простоты:

Что мне не хватает? Я чувствую, что это должно быть просто.

Может быть, это только конец рабочего дня.

  • 5
    Вы не можете выделить текст с помощью CSS, поэтому вы также не можете сделать это с помощью селектора jQuery. текстовые узлы также не могут иметь события щелчка или наведения мыши.
  • 3
    Облегчите себе жизнь, оберните текст в div и выберите div. Тогда не имеет значения, что это за текст.
Показать ещё 2 комментария
Теги:
jquery-selectors

5 ответов

1
Лучший ответ

Вы рассматривали использование виджета jQueryUI tooltip?

Это позволяет вам установить любой элемент для всплывающей подсказки, просто указав title="Text for the tooltip goes here" атрибут title="Text for the tooltip goes here".

Образец кода:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <script type="text/javascript">
            $(document).ready(function() {
                $( document ).tooltip();
            });
        </script>
    </head>
    <body>

        <p>Using your daggar<span title="This is a tooltip">&#8225;</span> symbol.</p>
        <p><a href="#" title="That what this widget is">Tooltips</a> can be attached to any element. When you hover
        the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>

        <p>But as it not a native tooltip, it can be styled. Any themes built with
        <a href="http://themeroller.com" title="ThemeRoller: jQuery UI theme builder application">ThemeRoller</a>
        will also style tooltips accordingly.</p>

        <p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>

        <p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>

        <p>Hover the field to see the tooltip.</p>

    </body>
</html>
Поделиться
  • 0
    Спасибо, я думаю, что это лучшее решение, так как я уже использую интерфейс. Спасибо всем, кто ответил. Я пытался дать вам несколько баллов за то время.
4

Вы не можете сделать селектор, который находит символ, потому что селектор может находить только элементы.

Оберните символ в элемент, который вы можете настроить. Пример:

<span id="asdf">&#8225;</span>

Затем вы можете найти элемент:

$("#asdf").click(function() { alert('hovered'); });
Поделиться
  • 1
    он не захочет использовать идентификатор, так как он захочет использовать это несколько раз на странице, если это всплывающая подсказка ...
  • 2
    @DrCord: Может быть, а может и нет. Если есть несколько всплывающих подсказок, в них может быть разная информация ...
Показать ещё 2 комментария
1

Селекторы CSS нацелены на элементы DOM. Вы не можете выбрать только текст с ними, и поэтому вы не можете добраться до него с помощью jQuery. Вам нужно обернуть его тегом <span>:

http://jsfiddle.net/BYossarian/xdS7V/3/

HTML:

<span class="tooltip">&#8225;</span>

JQuery:

$(".tooltip").click(function() { 
    console.log('clicked'); 
});
Поделиться
1

$ ("‡") не является законным селектором jQuery. Попробуйте обернуть его в промежутке с классом, а затем выберите его.

<span class="tooltip">&#8225;</span>

$(".tooltip").click(function() { alert('clicked'); });
Поделиться
1

Как и все остальные ответы о том, чтобы положить его в промежуток, но вы можете выбрать его с помощью чисто контента...

$("span").filter(function() {
    return this.innerText == "‡";
}).on("mouseover", function() { alert('hovered'); });

Работа jsFiddle

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню