Селекторы Jquery: выберите любые слова - PullRequest
Новая
       1

Селекторы Jquery: выберите любые слова

0 голосов
/ 26 августа 2011

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

Большое спасибо

Ответы [ 2 ]

0 голосов
/ 26 августа 2011

Лучший ответ, который я мог придумать, это использовать регулярное выражение, чтобы выбрать каждое слово в div и окружить его тегами <span>, для которых определены onmouseover события. 

<html>
  <head>
    <script type="text/javascript">
      $(document).ready(function() {
        var text = $("#wordHoverable").html().trim();
        var newText = "";
        var wordRegex = /\w*/;     //Selects 'word characters' (alpha-numeric)
        var nonWordRegex = /\W*/;  //Selects all other characters

        var foundWord = text.match(wordRegex);
        while (foundWord != "") {
          newText += "<span onmouseover=\"hoverFunc('" + foundWord + "');\">" +
                foundWord + "</span>";
          text = text.replace(wordRegex, "");
          var nonWordChars = text.match(nonWordRegex);
          newText += nonWordChars;
          text = text.replace(nonWordRegex, "");
          foundWord = text.match(wordRegex);
        }
        $("#wordHoverable").html(newText);
      });

      function hoverFunc(text) {
        //Do whatever when their mouse is over the word
        $("#currentWord").html(text);
      }
    </script>
  </head>
  <body>
    <div>
      Current word: <span id="currentWord"></span>
    </div>
    <div id="wordHoverable">
      Hi there everyone.
    </div>
  </body>
</html>

Воттот же код в jsFiddle: http://jsfiddle.net/hpvtn/1/

Это может быть не очень эффективно для запуска в больших масштабах на месте, но вы можете использовать это как своего рода «компилятор» для преобразования легко в- читать простой текст в <div> и преобразовывать его в нужный вам интерактивный текст.

Как сказал Фил, я не думаю, что вы на самом деле можете прикреплять события к самим отдельным словам, если вы не заключите их в оберткув тегах <span>.

0 голосов
/ 26 августа 2011

AFAIK текстовые узлы не подходят для добавления событий.Они также не «выбираются» с помощью jQuery.

Вы можете выбрать родительский узел некоторого текста с помощью селектора :contains() и прикрепить к нему события.

Обновить

Что вы можете сделать, это найти родительский элемент вашего текста и заменить его внутренний HTML некоторой измененной разметкой, например 

var parent = $(':contains("My Text")');
var text = parent.html();
parent.html(text.replace(/My Text/g, '<span class="hover-event">$&</span>'));

$('.hover-event').mouseenter(function(e) { ... });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...