2013-10-02 6 views
0

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

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

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

JSFiddle here со щелчком действия вместо висения для простоты:

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

Возможно, это только конец рабочего дня.

+5

вы не можете выбрать текст с помощью CSS, поэтому вы не можете сделать это с помощью селектора JQuery либо. текстовые узлы также не могут иметь события click или hover. –

+3

Сделайте жизнь легкой для себя и оберните текст в div и выберите div. Тогда не имеет значения, что это за текст. –

+4

@ScottMermelstein или 'span', так как я предполагаю, что это встроенный текст. – Populus

ответ

1

Рассматривали ли вы с помощью jQueryUI tooltip widget?

Это позволяет вам установить любой элемент во всплывающую подсказку, просто указав атрибут 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's 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's not a native tooltip, it can be styled. Any themes built with 
     <a href="http://themeroller.com" title="ThemeRoller: jQuery UI's 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

Спасибо, я думаю, что это лучшее решение, поскольку я уже использую интерфейс. Спасибо всем, кто ответил. Я постарался дать вам несколько моментов времени. – briansol

4

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

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

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

Тогда вы можете найти элемент:

$("#asdf").click(function() { alert('hovered'); }); 
+1

он не захочет использовать идентификатор, поскольку он захочет использовать это несколько раз на странице, если это всплывающая подсказка. – DrCord

+2

@ DrCord: Может быть, может и нет. Если есть несколько подсказок, в них может быть различная информация ... – Guffa

+2

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

1

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

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

$(".tooltip").click(function() { alert('clicked'); }); 
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

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

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

Working jsFiddle

Смежные вопросы