未调用函数答案

【问题标题】：Function is not Called未调用函数
【发布时间】：2011-08-20 11:36:50
【问题描述】：

我有一些 javascript 应该在窗口加载后运行，但由于某种原因，它永远不会运行。

这是我的代码：

function setClasses(){
        document.getElementsByClassName("gchoice_35_0")[0].onclick = sedanShow;
        document.getElementsByClassName("gchoice_22_0")[0].onclick = sedanShow;
        document.getElementsByClassName("gchoice_34_0")[0].onclick = sedanShow;

        document.getElementsByClassName("gchoice_34_1")[0].onclick = suvShow;
        document.getElementsByClassName("gchoice_35_1")[0].onclick = suvShow;
        document.getElementsByClassName("gchoice_22_1")[0].onclick = suvShow;

        document.getElementsByClassName("gchoice_22_2")[0].onclick = vanShow;
        document.getElementsByClassName("gchoice_35_2")[0].onclick = vanShow;
        document.getElementsByClassName("gchoice_34_2")[0].onclick = vanShow;
    }

window.onload = setClasses;

setClasses() 函数似乎没有运行。但是，当我通过 FireBug 的控制台手动调用它时，它确实有效。

代码放在我网页的页眉中。

感谢任何帮助。

完整的html sn-p：

<head>
......

<script type="text/javascript">
function setClasses(){
        document.getElementsByClassName("gchoice_35_0")[0].onclick = sedanShow;
        document.getElementsByClassName("gchoice_22_0")[0].onclick = sedanShow;
        document.getElementsByClassName("gchoice_34_0")[0].onclick = sedanShow;

        document.getElementsByClassName("gchoice_34_1")[0].onclick = suvShow;
        document.getElementsByClassName("gchoice_35_1")[0].onclick = suvShow;
        document.getElementsByClassName("gchoice_22_1")[0].onclick = suvShow;

        document.getElementsByClassName("gchoice_22_2")[0].onclick = vanShow;
        document.getElementsByClassName("gchoice_35_2")[0].onclick = vanShow;
        document.getElementsByClassName("gchoice_34_2")[0].onclick = vanShow;
    }

    function sedanShow(){
            document.getElementById("sedan").style.display="inline"
            document.getElementById("suv").style.display="none"
            document.getElementById("van").style.display="none"
        }
        function suvShow(){
            document.getElementById("sedan").style.display="none"
            document.getElementById("suv").style.display="inline"
            document.getElementById("van").style.display="none"
        }
        function vanShow(){
            document.getElementById("sedan").style.display="none"
            document.getElementById("suv").style.display="none"
            document.getElementById("van").style.display="inline"
        }
    window.onload = setClasses;
    </script>

……

【问题讨论】：

此代码出现在您页面的什么位置？您介意发布一个不起作用的完整 HTML sn-p 吗？
我相信 setClasses 正在运行，这不是问题。我敢打赌，如果您在 setClasses 函数中设置警报，它就会触发。我相信这可能是您设置 onclick 属性的方式。 IE 要求将其设置为字符串，而 firefox 要求将其设置为函数。 JQuery 和 YUI 通过提供事件实用程序来帮助缓解这种情况。我建议研究这些框架，因为它们有助于减少您必须处理的许多跨浏览器怪癖。
还有什么设置 window.onload 会覆盖此代码吗？
@shahmeer navid：为什么要为onload 事件分配一个字符串？您应该分配函数window.onload = setClasses;。
@shahmeer，onload 是否正在其他地方使用？简单的问题。 :)

标签： javascript function call onload

【解决方案1】：

你总是可以使用 JQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">
        $(document).ready(function() {
            setClasses();
        });
</script>

编辑

示例 JQuery 事件重构：

$(".gchoice_35_0").click(function(){
    //Handler Code...
});

【讨论】：

很好，JQuery 也是一个很好的解决方案，您能否通过在 setClasses 方法中显示 Jquery 事件处理来详细说明您的答案？我认为这会给你的答案增加一些价值。

【解决方案2】：

我将给出一个使用 YUI 的答案，可以随意使用或不使用，但我认为框架是帮助加速 javascript 开发的好主意。因此，将以下内容添加到您的页面中

<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

然后代替 window.onload = someFn （因为这在 IE 中可能很古怪，惊喜惊喜），请执行以下操作

YAHOO.util.Event.onDOMReady(function () {
    setClasses();
});

然后在你的 set classes 函数中，执行以下操作

function setClasses(){
        YAHOO.util.Event.on(document.getElementsByClassName("gchoice_35_0")[0], 'click', sedanShow);
        YAHOO.util.Event.on(document.getElementsByClassName("gchoice_22_0")[0], 'click', sedanShow);
        YAHOO.util.Event.on(document.getElementsByClassName("gchoice_34_0")[0], 'click', sedanShow);

        YAHOO.util.Event.on(document.getElementsByClassName("gchoice_34_1")[0], 'click', suvShow);
        YAHOO.util.Event.on(document.getElementsByClassName("gchoice_35_1")[0], 'click', suvShow);
        YAHOO.util.Event.on(document.getElementsByClassName("gchoice_22_1")[0], 'click', suvShow);

        YAHOO.util.Event.on(document.getElementsByClassName("gchoice_22_2")[0], 'click', vanShow);
        YAHOO.util.Event.on(document.getElementsByClassName("gchoice_35_2")[0], 'click', vanShow);
        YAHOO.util.Event.on(document.getElementsByClassName("gchoice_34_2")[0], 'click', vanShow);
    }

这应该可以解决问题。

【讨论】：