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文本应该是我们在div2中输入的内容第二个输入框。

这是我迄今为止尝试过的方法，但不起作用:

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

这有什么问题吗？提前致谢

Answer 1

传递给 change() 函数的参数不是索引。这是一个event object 。您需要自己获取索引，使用 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/