2

言う、私は持っている：

<p> This is a sentence </p>

そして、ユーザーが文中の単語 (this, is, a, 文) をクリックすると、Web ページは特定の単語がクリックされたことを認識します。そのためのjsまたはjQueryライブラリに何かがありますか?

Django のプロジェクトでこれを行いたいので、単語をクリックすると、文のどの単語がクリックされたかがわかります (文全体ではありません)。

そのためのアイデアは 2 つだけです。

  1. javascript と getElementByID OR を使用してクリックしたときに単語が区切られるように、文をさまざまな要素に分割します。
  2. ＃1と似ていますが、アンカータグを使用してリンクとリンクの値を同じ形式で渡すだけなので、文のどの単語が渡されたかがわかります（）これにも何か問題があると思います.

もっと良い方法はありますか？または、最善の方法は何ですか？

4

6 に答える 6

5

これは一度やったことがありますが、ドキュメント全体に対して行うのは非常に厄介なことでしたが、段落に対しては悪くありませんでした。

テキストノードを空白で分割します。次に、各単語をスパンでラップし、ドキュメントに戻します。

PARENT NODE にリスナーをアタッチし、委譲を使用して、クリックされたスパンを特定します。

于 2012-09-07T00:30:48.563 に答える
2

複数の要素を使用することが最も標準に準拠した方法だと思いますが...

...クーリエのような等幅フォントを使用すると、フォントの等幅の性質により各文字の幅を予測できるため、文内のマウスの 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 デモ

.replace(regex, changedStuff)単語ごとにクリック可能なイベントを作成するには、JavaScript を使用して html を置き換える必要があります。

$('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 に答える