1

内部タグを削除せずにアンカータグのテキストを置き換える方法は?

<div class="xyz">
  <a>Hello <b class="caret"></b></a>
</div>

$('.xyz').click(function(){
  $(this).find('a').text('hello2');  
});

JSFiddle : http://jsfiddle.net/DXR32/

青い領域をクリックすると、アンカー タグ内のテキストが変更されますが、アンカー内の b タグも消えます。とにかくこれを修正するには？

4

5 に答える 5

2

次のようなものが機能し、テキスト変更の最後にボタンを追加します: http://jsfiddle.net/DXR32/1/

var blueButton = '<b class="caret"></b>';

$('.xyz').click(function(){
   $(this).find('a').html('hello2 '+blueButton); 
});

編集：

または、@Nikola Radosavljević と @François Wahl が以下で提案するように、アンカー内の独自の要素内で変更するテキストを次のようにカプセル化します。

<div class="xyz">
    <a><span class="switchable">Hello</span> <b class="caret"></b></a>
</div>

$('.xyz').click(function(){
   $(this).find('.switchable').text('hello2');
});

これにより、ボタン html をハードコーディングする必要がなくなり、任意の数のアンカー要素でクリック関数を再利用することもできます。必要なのは、切り替えたいテキストを含むspanクラスを持つ独自のものだけです。switchable

<div class="xyz">
    <a><span class="switchable">Click Me 1</span> <b class="caret"></b></a>
</div>
<div class="xyz">
    <a><span class="switchable">Click Me 2</span> <b class="caret2"></b></a>
</div>
<div class="xyz">
    <a><span class="switchable">Click Me 3</span> <b class="caret3"></b></a>
</div>

$('.xyz').click(function(){
   $(this).find('.switchable').text('You Clicked Me!');
});

明らかに、アプリは最後の例とは完全に異なる場合があります。

于 2012-08-14T11:18:00.820 に答える
2

2 つのオプションがあります

<div class="xyz">
    <a><span id="hello">Hello </span><b class="caret"></b></a>
</div>
$('.xyz').click(function() {
    $(this).find('#hello').text('hello2');
});

$('.xyz').click(function() {
    var a = $(this).find("a");
    a.html(a.html().replace("Hello ", "Hello2 "));    
});
于 2012-08-14T11:20:08.533 に答える
1

You can try saving the .children() of the anchor before replacing the text, like so:

$('.xyz').click(function() {
    var cache = $(this).find('a').children();
    $(this).find('a').text('Hello2');
    $(this).find('a').append(cache);
});​

And then .append() ing them back after. I've updated your jsFiddle with this.

于 2012-08-14T11:23:54.063 に答える
0

これを試して：

$('.xyz').click(function(){
   var b = '<b class="caret"></b>'; 
   $(this).find('a').html('hello2' + b);    
});

http://jsfiddle.net/DXR32/3/

于 2012-08-14T11:19:15.733 に答える
0 
$('.xyz').click(function(){
    $(this).find('a').html(function(i, oldHtml) {
      return oldHtml.replace('Hello', 'hello2');
    });
});    
​

デモ

于 2012-08-14T11:20:47.463 に答える