XUI toggleClass 错误答案

【问题标题】：XUI toggleClass errorXUI toggleClass 错误
【发布时间】：2011-10-25 09:58:00
【问题描述】：

我有一个输入，然后按下此事件：

document.getElementById("nearest").addEventListener('click', function(){
    x$("#popup").toggleClass('hide');
}, false);

然后我在控制台中收到此错误：

x$("#popup").toggleClass is not a function
[Break On This Error] x$("#popup").toggleClass('hide');

这是 div 和输入元素

<div id="popup" class="hide"></div>
<input id="nearest" type="image" name="nearest">

【问题讨论】：

XUI 可以，只是这个不行

标签： javascript xui

【解决方案1】：

以下代码似乎按预期工作——它将背景颜色从红色切换为蓝色（在 FireFox 8.0 和 Chrome 17.0.942.0 中测试）：

<html>
<head>
    <style type="text/css">
        #popup{
            position:relative;
            height:100px;
            width:100px;
            margin:10px;
            background-color:red;
       }
        .hide{
            background-color:blue !important;
        }
    </style>


    <script type="application/javascript" src="http://xuijs.com/downloads/xui-2.3.2.min.js"></script>
    <script type="application/javascript">
        x$.ready(function() { 
            document.getElementById('nearest').addEventListener('click', function(){
                x$("#popup").toggleClass('hide');
            }, false);
        });
    </script> 
</head>
<body>
    <div id="popup" class="hide"></div>
    <input id="nearest" type="image" name="nearest" />
</body>
</html>

为了确认，我假设您最初使用的 document.getElementId() 是函数的一部分还是包含在某些 onLoad 脚本中？在工作示例中，我使用 XUIs ready() 函数来确保 DOM 已加载。

还值得注意的是，下面的代码是等价的，因为您仍然使用 XUI：

x$.ready(function() { 
    x$('#nearest').click(function(){
        x$("#popup").toggleClass('hide');
    });
});

【讨论】：