1

マウスがdiv内の特定の文字列の上に置かれたかどうかを調べる方法は?

たとえば、「Jay-Z は 2008 年にアメリカの R&B シンガー Beyoncé Knowles と結婚しました」という文字列の「Jay-Z」という単語の上にマウスが置かれているかどうかを検出します。

4

2 に答える 2

2

これを行うための簡単な JQuery メソッドを次に示します。まず、すべての div を見て、それらの中で Jay-Z という単語を探します。そして、クラス「jay-z」でスパンにラップします。

$( 'div' ).each(function( i ) {
    $( this ).html( $( this ).html().replace( /(Jay-Z)/g,'<span class="jay-z" >$1</span>' ) );
});

次に、クラス jay-z を使用して、div 内のスパンでのマウスオーバーのイベント ハンドラーを割り当てます。

$( "div" ).on( "mouseover", '.jay-z', function() {
  alert( "Hey, it's Jay-z" );
  //do something
});

ここのライブ例http://jsfiddle.net/eLJmd/

于 2013-10-12T17:46:24.803 に答える
0

最も簡単な方法は、興味のある文字列を a のような要素に入れることですspan:

<span class="special">Jay-Z</span> married American R&amp;B singler Beyoncé Knowles in 2008

mouseover次に、そのスパン/それらのスパンでイベントをキャプチャできます。

それらを a (または同様のもの) に入れずに行う必要がある場合は、spanはるかに困難です。同じスタイルが適用された要素を作成し、そのサイズを測定してから、テキストを含む要素全体のどこにあるかを把握する必要があります。

HTML が最初に生成されたときにそれができない場合でもspan、DOM がロードされた後に何らかのテキストを a に入れることは特に難しいことではないことに注意してください。

マークアップで実行できますが、既存の要素に既に接続されているイベント ハンドラーが削除されます。

var p = $("selector for the elment containing that text");
p.html(p.html().replace(/Jay-Z/g, "<span>Jay-Z</span>"));

...または (これはハンドラーがアタッチされている場合に適しています) DOM ノードをループして、そのテキストを含むテキスト ノードを探し、それらをspan要素に入れることができます。

function putInSpan(node, text) {
    var child, next, index, second, matchNode;

    switch (node.nodeType) {
        case 1: // Element
            for (child = node.firstChild; child; child = next) {
                next = child.nextSibling;
                putInSpan(child, text);
            }
            break;

        case 3: // Text node
            while (node !== next && (index = node.nodeValue.indexOf(text)) !== -1) {
                matchNode = node.splitText(index);
                matchNode.splitText(text.length);
                span = document.createElement('span');
                span.className = "special";
                node.parentNode.insertBefore(span, matchNode);
                span.appendChild(matchNode);
                node = span.nextSibling;
            }
            break;
    }
}

実例| ライブソース

これは、jQuery ではなく DOM を直接使用します。jQuery はほとんどが要素指向であり、このためにテキスト ノードを直接処理する必要があるためです。

于 2013-10-12T17:24:00.937 に答える