3

私はちょうどjQueryを学んでいます。私はとても初心者です。

次のように 2 つの div があります。

<div id="div1">
<ul>
    <li> This is Line 1</li>
    <li> This is Line 2</li>
    <li> This is Line 3</li>
    <li> This is Line 4</li>
    <li> This is Line 5</li>
</ul>
</div>

<div id="div2">
<ul>
    <li> <input type="text" /></li>
    <li> <input type="text" /></li>
    <li> <input type="text" /></li>
    <li> <input type="text" /></li>
    <li> <input type="text" /></li>
</ul>
</div>

change() 関数を学習しているだけなので、これがやりたいことです: div2 の入力ボックスの各値が変更されると、同じ番号の div1 li が入力された値に変更される必要があります。たとえば、入力を開始した場合です。 div2 の 2 番目の入力ボックスで、2 番目の li テキストは、2 番目の入力ボックスに入力した内容になります。

これが私がこれまでに試したことですが、うまくいきません：

<script type="text/javascript">
    $(document).ready(function(){
        $('#div2 :input').change(function(i){
            var str = $(this).text;
            $('#div1 li').eq(i).text(str);
        });
    });
</script>

これの何が問題なのですか？前もって感謝します

4

4 に答える 4

6

関数に渡されるパラメーターchange()はインデックスではありません。それはeventオブジェクトです。を使用して、自分でインデックスを取得する必要がありますindex()。

また、text()ここではメソッドが間違ってval()います。入力の値を取得するために使用する必要があります。

$('#div2 :input').change(function() {
    var str = $(this).val(), // You need to use `val` to get the value (also, note the "()" here)
        index = $(this).parent().index(); // this gets the index of the input
    $('#div1 li').eq(index).text(str);
});​

デモ: http://jsfiddle.net/skram/UJBCr/1/

于 2012-05-11T18:25:12.440 に答える
2

使用しないでくださいval()（テキスト入力後なので）text()：

 var str = $(this).val();
于 2012-05-11T18:17:00.213 に答える
1

変化するvar str = $(this).text

なので

var str = this.value; //or $(this).val()

于 2012-05-11T18:16:39.830 に答える
1

これを使って：

 $('#div2 :input').change(function(e){
      var i = $('#div2 :input').index(this);
      $('#div1 li').eq(i).text( $(this).val() );
 });

デモ

于 2012-05-11T18:28:02.633 に答える