0

私はこのhtmlコードを持っています

<ul class="criteria">
<li id="1">
criteria 1
<img id="1" class="save_criterion" src="../images/icons/add-icon-2.png">
<img id="1" class="delete_criterion" src="../images/icons/icon_delete_16x16.png">
</li>
<li id="2">
criteria 2
<img id="2" class="save_criterion" src="../images/icons/add-icon-2.png">
<img id="2" class="delete_criterion" src="../images/icons/icon_delete_16x16.png">
</li>
</ul>

Liテキストを動的に変更する機能があります

$("input#criterion_name").live("keyup",function(e){
    var newText =  $("input#criterion_name").val();
    if(newText){
    $("ul.criteria > li.selected").html(newText);
    }
    else{
    // can't leave the text filed empty 
    $("#criterion_name").addClass("error"); 
}

問題は、入力テキストにテキストを入力すると、li 要素の画像が削除されることです。li要素のテキストを変更したいだけです

4

5 に答える 5

4

.text()の代わりに使用.html()

編集

$(".criteria > li").contents().filter(function(){return this.nodeType == 3}).first().replaceWith(newText);
于 2012-10-12T16:36:13.813 に答える
2

のように、テキストを独自の要素でラップする必要がありますspan。次に、次のようにターゲットに設定できます。

$("ul.criteria > li.selected > span.thetext").html(newText);

また、id 属性は数字だけであってはならず、ドキュメント内で複数回使用してはなりません。つまり、一意でなければなりません。いくつかのインスタンスがありますid="1"

于 2012-10-12T16:36:40.777 に答える
0

nodeTypeプロパティを使用して、テキストのみを選択して置き換えることができます。その値をスパンで囲む必要はありません。

このコードを試してください

$("ul.criteria > li").contents().filter(function() {
      return (this.nodeType != 1 && this.textContent != '\n')
}).replaceWith('Older Text replaced...');
​
  • を使用して.contents()、li 内のすべてのコンテンツを取得します。
  • 次に、キャリッジ リターンのないテキスト ノードのみをフィルタリングして選択します。
  • 次に、新しいテキストに置き換えます

フィドルをチェック

于 2012-10-12T16:59:24.610 に答える
0

さらに、そのスパンをさらに操作できるため、Andyの回答が好きです。

したがって、HTML コードは次のようになります。

<ul class="criteria">
  <li id="1">
    <span class="label_text">criteria 1</span> <!-- wrap in span.label_text -->
    <img id="1" class="save_criterion" src="../images/icons/add-icon-2.png">
    <img id="1" class="delete_criterion" src="../images/icons/icon_delete_16x16.png">
  </li>
  <li id="2">
    <span class="label_text">criteria 2</span> <!-- wrap in span.label_text -->
    <img id="2" class="save_criterion" src="../images/icons/add-icon-2.png">
   <img id="2" class="delete_criterion" src="../images/icons/icon_delete_16x16.png">
  </li>
</ul>

要素 IDは HTML ドキュメント内で一意である必要があり、ID による検索が最速の jQuery セレクターであるため、要素の種類とIDで選択する必要はありません。" .live() メソッドは非推奨です。 "; 代わりに .on() メソッドを使用することをお勧めします。したがって、Andy のソリューションを追加すると、jQuery は次のようになります。

$('#criterion_name').on('keyup', function() {
    var newText =  $(this).val();
    if(newText.length){
      $('ul.criteria > li > span.label_text').html(newText);
    }
    else{
      // can't leave the text filed empty 
      $('#criterion_name').addClass('error');
    }
});​

実際の例については、私のフィドルを参照してください。

于 2012-10-12T17:14:48.060 に答える
0

名前liを a span(または機能すると思われる要素) で囲みます。次に、を変更しspanます。

フィドル: http://jsfiddle.net/LLPya/1/

HTML:

<input type="text" id="criterion_name" />

<ul class="criteria">
    <li id="1">
        <span class="criteria_name">criteria 1</span>
        <img id="1" class="save_criterion" src="../images/icons/add-icon-2.png">
        <img id="1" class="delete_criterion" src="../images/icons/icon_delete_16x16.png">
    </li>
    <li id="2">
        <span class="criteria_name">criteria 2</span>
        <img id="2" class="save_criterion" src="../images/icons/add-icon-2.png">
        <img id="2" class="delete_criterion" src="../images/icons/icon_delete_16x16.png">
    </li>
</ul>​

jQuery:

$('#criterion_name').keyup(function() {
    var newText = $(this).val();
    if (newText) {
        $('#1 span.criteria_name').html(newText);
    }
});​

セレクターに基づいて、HTML が完全ではなかったため、テキスト ボックスを追加し、最初の の名前を変更していますli。

于 2012-10-12T16:42:00.980 に答える