-3

実験的なアイデアに問題があります。おそらく、ここで私を助けることができるのはjQueryの達人だけです:)

私は段落を持っています：

<p>Lorem Ipsum is simply dummy text of the printing 
and typesetting industry. Lorem Ipsum has been the 
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book.</p>

そして、jQueryの助けを借りて、少なくとも4文字の「オンザフライ」onMouseOverを含むすべての単語を、各単語から作成されたリンクに変換する必要があります。

HTMLで生成したくありません（帯域幅のため、メガに成長します）。そのコードは次のようになります。

<p>
<a href="/search?q=Lorem">Lorem</a> 
<a href="/search?q=Ipsum">Ipsum</a> 
is 
<a href="/search?q=simply">simply</a>
.........
</p>

また、テキスト装飾 onMouseOver にも感謝します。

4

3 に答える 3

1

次のようなものを試してください。

$("p").on("hover", function(){
    var content = ​$("p").text();​​​​​
    var words = content.split(" ");
    var length = words.length;
    var newContent = [];

    for(var i = 0; i < length; i++){
        if(words[i].length >= 4){
          newContent.push("<a href='/search?q=simply'>" + words[i] +"</a>")
         }else{
           newContent.push(words[i])
         }
    }     
    $(this).text("");
    $(this).html(newContent.join(" "));              
});

ただし、これはaホバーアウト後にタグを削除せず、すべてのホバーイベントに対して実行されます。両方の問題の修正があるかもしれませんが、私はそれらを理解するためにあなたに任せます。

例

于 2012-11-02T17:28:28.713 に答える
0

これをdocument.readyまたはdocument.load呼び出しに追加します。

$('p').on('hover', 'a', function(){ /* do whatever needs to be done on your link */});
var new_text = [];
$.each($('p').text().split(" "), function(index, word) {
    if (word.length >= 4) {
        word = word.replace(/(\w*)/, '<a href="YOUR URL HERE">\1</a>');
    }
    new_text.push(word);
});
var new_text_as_str = new_text.join(" ");
$('p').html(new_text_as_str);
于 2012-11-02T17:28:31.237 に答える
0

これがどれほど効率的かはわかりませんが、次のようになります。

​$('p').hover(function(){
    var txt = $(this).text();
    txt = txt.replace(/\b([a-z]{4,})\b/ig, '<a class="word" href="/search?q=$1">$1</a>');
    $(this).html(txt);
}, function(){
    $('a.word', this).each(function(){
        $(this).replaceWith($(this).text());
    });
});​

にリンクを追加しmouseenter、にそれらを削除しますmouseleave。

デモ：http：//jsfiddle.net/8Yqfb/

于 2012-11-02T17:29:50.513 に答える