0

jqueryのmouseenter/Leaveを使用して、他の子要素を変更せずに、コンテナー内の（現在ホバーされている）TEXTを変更しようとしています。

ライブのサードパーティのWebサイトでこれを使用しています。これは、HTMLコードを制御できないことを意味し、次の問題が発生します。

  • 親コンテナに子要素がいくつあるかわかりません
  • HTMLタグ（親と子の両方）は、LI、IMG、A、SPAN、H1などの任意のものにすることができます。
  • 変更する必要のあるテキストの位置は、最初から最後まで、およびその間のものによって異なります。

私は次のことを試しました（nameXとindexXは現在の要素を識別するために使用されます-他の場所で実際の値を使用する必要があるため、それ自体では「this」を使用できません）：

$("a,img,p").mouseenter(function (event) {
   nameX = this.tagName;
   indexX = $(nameX).index(this);
   $(''+nameX+':eq('+indexX+')').text("hello");
});

<ul>
  <li>
     <a href="">bullet 1  
        <img src="http://bit.ly/ZqJ1DL"  width="229" height="129"/>
     </a><br>  
     <a href="">bullet 2  
     </a><br>  
     <a href="">bullet 3
     </a><br>
     general text
  </li>
</ul>

上記を使用すると、箇条書き2または箇条書き3にカーソルを合わせると機能します。

ただし、箇条書き1では機能しません-ここでは、JSが画像を含む親のすべてのコンテンツを置き換えます-テキストの代わりに、画像（および他の子）をそのままにして、画像の位置に関係なく、テキスト。

FIDDLEHEREの例を参照してください

[編集：上記のHTMLはサンプルコードです-ホバーしているサードパーティのWebサイトのコードになるため、何でもかまいません-したがって、JQueryコードについてのみコメントしてください-ありがとう、スティーブ]

4

2 に答える 2

1

このスクリプトは、アンカー内のすべてのDOM要素を選択して、テキストを変更するときにそれらを置き換えることができるようにします。

$("a").mouseenter(function (event) {
  nameX = this.tagName;
  indexX = $(nameX).index(this);

  var elem = $('' + nameX + ':eq(' + indexX + ')');  
  var internals = $("*", elem);  
  elem.html("")
      .append(internals)
      .append("hello");
});

http://jsfiddle.net/vvtgQ/

これは、jQuery.contents（）を使用して：text要素のみを処理するバージョンです。

$("a").mouseenter(function (event) {
  nameX = this.tagName;
  indexX = $(nameX).index(this);

  var elem = $('' + nameX + ':eq(' + indexX + ')');
  elem.contents().each(function(index, item) {    
    if(item.nodeType == 3)
    {
      item.nodeValue = "hello";
    }
  });
});

http://jsfiddle.net/eYSXp/

于 2013-01-09T14:49:37.110 に答える
1

これがすでに回答されているかどうかはわかりませんが、次のようになります。

$("a,p").mouseenter(function (event) {  
  nameX = this.tagName;
  indexX = $(nameX).index(this);
  runningText = $(''+nameX+':eq('+indexX+')').text();
  runningText = runningText.replace(/\W/g, ' ');
  while (runningText.charAt(runningText.length-1) == " ") {
    runningText = runningText.substr(0, runningText.length-1);
  }
  newText = "hello";
  newHTML = $(this).html();
  newHTML = newHTML.replace(runningText, newText);
  $(this).html(newHTML);  
});

http://jsfiddle.net/esauq/36/

于 2013-01-09T15:17:26.953 に答える