javascript - 为什么 JsFiddle 给出未定义的错误？

Question

看看这个小提琴http://jsfiddle.net/fXfSz/：

如果您在控制台中查看它shiftLeft是未定义的，但它是这样定义的：

function shiftLeft()
{
    for (var char in $('#chars').children())
    {
        log(char);
        char.css({left:char.position().left -100});
    }
}

Answer 1

因为函数shiftLeft没有在全局范围内定义。它是您分配给的函数的本地函数onload（一个永远不会运行的函数，因为您已将 JSFiddle 配置为仅运行也执行该分配的函数onload）。

使用 JavaScript 绑定事件处理程序，而不是onclick属性。

function shiftLeft()
{
    for (var char in $('#chars').children())
    {
        // log is not a global
        console.log(char);
        char.css({left:char.position().left -100});
    }
}

function assignHandlers() {
    document.querySelector('button').addEventListener('click', shiftLeft);
}


// If you weren't using JSBin to run this onload:
// addEventListener('load', assignHandlers);
// but since you are:
assignHandlers();

Answer 2

您的shiftLeft函数未在全局范围内定义，而是在onload事件处理程序之一中定义。

从onload功能代码中删除它并将小提琴包装设置更改为“无包装 - 头部”。或者，更好的是，使用click函数绑定它。

但是您的功能中还有其他错误。也许你想要这个：

<button id="idofthebutton">Left</button>
<script>
$('#idofthebutton').click(function(){
    $('#chars').children().each(function(){
         $(this).css({left:$(this).position().left -100});
    });
});
</script>

示范