2

说，我有：

<p> This is a sentence </p>

而当用户点击句子中的单词（this, is, a, sentence）时，网页就会知道点击了特定的单词。js 或 jQuery 库中有什么东西吗？

我想为我在 Django 中的项目这样做，这样当他们点击一个单词时，我知道点击了句子中的哪个单词（而不是整个句子本身）。

我对此只有两个想法：

  1. 将句子拆分为不同的元素，以便在单击时使用 javascript 和 getElementByID 或
  2. 与 #1 类似，但我只是使用锚标记并以相同的形式传递链接和链接的值，以便我知道句子中的哪个单词被传递 () 我猜这也有问题。

有没有更好的办法？或者最好的方法是什么？

4

6 回答 6

5

我们这样做过一次，在整个文档上这样做是一件非常讨厌的事情，但对于一个段落来说还不错。

获取文本节点，将其拆分为空白。然后，将每个单词包装在一个 span 中并将其放回文档中。

将侦听器附加到父节点并使用委托来确定单击了哪个跨度。

于 2012-09-07T00:30:48.563 回答
2

我认为使用多个元素是最符合标准的方式，但是......

...使用像 courier 这样的等宽字体，由于字体的等宽性质，您可以在其中预测每个字母的宽度，您应该能够跟踪鼠标在句子中的 x 位置。

您可以使用 pageX 获取鼠标 X 坐标。它在 IE 中的 client.x。

  var properMethod = event.clientX || event.pageX;//This should select only the available non null property for the browsers
于 2012-09-07T00:36:13.240 回答
1

我会这样：

html:

<span>hello</span><span>world</span>

jQuery：

$("span").click(function() {
  alert($(this).text());
});
于 2012-09-07T00:32:27.657 回答
0

jsFiddle 演示

您需要使用 javascripts 替换 html 来.replace(regex, changedStuff)为每个单词创建可点击事件。

$('p').html(function(i, old) {
    return old.replace(/\b(\w+?)\b/g, '<span class="clickable">$1</span>')
}).click(function(e) { 
    alert(e.target.innerHTML);
});

现在，如果您在单词之间单击，则会显示 html，但您明白了。

于 2012-09-07T00:36:12.443 回答
0

如果您不想事先将每个单词都包含在标签中，则可以在单击后尝试这样做。如果您有单独的段落，则只需转换用户在其中单击的段落。

例如（http://jsfiddle.net/scovetta/TU9rs/1/）

$('#paragraph').live('click', function($evt) {
    var original_text = $(this).text();
    var word_list = $(this).text().split(' ');      
    var word_html = '';

    // Convert each word to an individual span
    $.each(word_list, function(_, word) {
        word_html += '<span class="word">' + word + '</span> ';
    });

    // Replace original paragraph with the spans
    $(this).text('').html(word_html);

    // Search through each span for one in the right spot
    $('#paragraph .word').each(function(_, elt) {
        var rect = elt.getBoundingClientRect();
        if ($evt.pageX >= rect.left &&
                $evt.pageY >= rect.top &&
                $evt.pageX <= rect.right &&
                $evt.pageY <= rect.bottom) {
            alert('You clicked on the word: ' + $(elt).text());
            return;
        }
    });

    // Clean up after ourselves
    $(this).html('').text(original_text);
});

​​​​​​​​​​​​</p>

于 2012-09-07T01:42:40.003 回答
0

这会将点击事件附加到指定选择器中的所有单词。如果该选择器有任何其他子元素，它会跳过它。

jsFiddle：

http://jsfiddle.net/iambriansreed/bAExr/

jQuery

$('p').each(function(){

    var $this = $(this);

    if($this.children().length) return;    

    $this.html(function(i, old) {
        return old.replace(/\b(\w+?)\b/g, '<span>$1</span>')
    });

    $this.children().click(function(e) { 
        alert(e.target.innerHTML);
    });

});

​</p>

于 2012-09-07T02:06:08.620 回答