Question

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
function foo() {
    $(this).parent('li').append('hello world');
}
</script>

<ul>
    <li><img src="http://www.gravatar.com/avatar/a3981906ca415e0ec3e051076b71b0cd?s=32&d=identicon&r=PG" onClick="foo()" /></li>
    <li><img src="http://www.gravatar.com/avatar/8ec1383b240b5ba15ffb9743fceb3c0e?s=32&d=identicon&r=PG" onClick="foo()" /></li>
</ul>

我正在尝试将字符串“hello world”附加到包含刚刚单击的图像的<li>。

Answer 1

无需附加onclick。用jQuery做吧

$('li').click(function(){
$(this).append('hello world')
});

检查http://jsfiddle.net/tFr5y/

处的工作示例

Answer 2

因为foo函数this未定义，函数不知道哪个元素触发事件。

<html>
<head>
<script src="jquery.js"></script>
<script>

    function foo(elem)
    {
        $(elem).parent('li').append('asdf');

    }
</script>
</head>
<body>
    <li><img  src="source" onclick="foo(this)" /></li>

    <li><img  src="source" onclick="foo(this)" /></li>

</body>
</html>

Answer 3

两次更改

[1]在foo中添加参数

function foo(me) {
    $(me).parent('li').append('hello world');  
}

[2]在onClick的foo中传递参数

<ul>
    <li><img src="http://www.gravatar.com/avatar/a3981906ca415e0ec3e051076b71b0cd?s=32&d=identicon&r=PG" onClick="foo(this)" /></li>
    <li><img src="http://www.gravatar.com/avatar/8ec1383b240b5ba15ffb9743fceb3c0e?s=32&d=identicon&r=PG" onClick="foo(this)" /></li>
</ul>

为什么这个简单的jQuery片段不起作用？

3 个答案:

检查http://jsfiddle.net/tFr5y/