jQuery简单示例：change()函数

Question

我是一名初学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中的第二个输入框中输入，第二个li文本应该变成我们在第二个输入框中输入的文本。

以下是我到目前为止尝试过的，但并没有起作用：

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

这是什么问题？ 提前感谢。

- behz4d

Answer 1

传递给change()函数的参数并不是索引，而是一个事件对象。您需要使用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);
});​

DEMO: http://jsfiddle.net/skram/UJBCr/1/

- gen_Eric

---

$(this).parent().index(); 和 $(this).index('#div2 :input'); 哪个更好？ - Selvakumar Arumugam

@Rocket mm $(this).parent().index(); 也应该可以正常工作 >> http://jsfiddle.net/skram/UJBCr/1/ << 但不确定它是否比 $(this).index('..') 更好。 - Selvakumar Arumugam

@Vega：是的，那可能更好。 - gen_Eric

@Rocket 谢谢，现在它可以工作了。我阅读了index()文档，但我不明白parent()与这种情况有什么关系！？为什么我们要使用parent()，我很好奇... - behz4d

因为调用没有任何参数的 index 会在元素的父级中搜索该元素，并返回其位置。所以，我们需要使用 parent() 来获取 <li>。然后当调用 index() 时，它会在其父级（即 <ul>）中搜索 <li> 并返回正确的位置。 - gen_Eric

好的，谢谢，现在它可以工作了。那么，如果我想要在我们输入框中输入时同时更改div1 li文本呢？我的意思是实时更改，而不是在模糊后li文本更改...？提前致谢 - behz4d

Answer 2

使用val()（因为你需要文本输入）而不是text()：

 var str = $(this).val();

- Sarfraz

Answer 3

将 var str = $(this).text

修改为

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

- Selvakumar Arumugam

Answer 4

请使用此功能：

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

演示

- Engineer

---

+1 是为了实际解决问题，而不仅仅指出缺少的 ()。 - gen_Eric

@Rocket 我可以说你的回答也是一样的 ;) - Engineer