javascript - JS : function in $(document). 就绪(xx)不工作

Question

这个问题已经有答案了:

What is the scope of variables in JavaScript? (27 个回答)

已关闭 5 年前。

我想在 $(document).ready(xx) block 中实现一个函数。

它应该看起来像这样，但不起作用:

$(document).ready(function () {
    function navTo(target) {
        if (target === 'into.html') {
            window.location.href = 'into.html';
        }
        else if (target === 'index.html') {
            window.location.href = 'index.html';
        }
    }

    window.init = changeColor();

    function changeColor() {
        document.getElementById("url").style.color = "#000000";
    }
});

如果我这样做，它就会起作用:

$(document).ready(function () {

    window.init = changeColor();

    function changeColor() {
        document.getElementById("url").style.color = "#000000";
    }
});


function navTo(target) {
    if (target === 'into.html') {
        window.location.href = 'into.html';
    }
    else if (target === 'index.html') {
        window.location.href = 'index.html';
    }
}

我的相关 HTML 代码:

<a onClick="navTo('into.html')">click</a>

Answer 1

发生这种情况是因为当您设置 onclick 时，它会尝试在全局范围内查找该函数，因为您在文档就绪函数中定义了该函数，因此它不会运行并设置为未定义来解决它，您可以声明它作为一个全局函数(你已经这样做了)，或者你可以声明一个 jQuery 事件...

$(document).ready(function () {
    $('.link').click(function(){
       if ($(this).attr('target') === 'into.html') {
            window.location.href = 'into.html';
        }
        else if ($(this).attr('target') === 'index.html') {
            window.location.href = 'index.html';
        }
    }); 

    window.init = changeColor();

    function changeColor() {
        document.getElementById("url").style.color = "#000000";
    }
});

HTML

<a class="link" target="into.html">click</a>