XUI 切换类错误

发布于 2024-12-11 22:29:05 字数 472 浏览 0 评论 0原文

我有一个按下的输入,然后调用此事件:

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">

I have a input that I press then this event is called:

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

then I get this error in console:

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

This is the div and the input element

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

愁杀 2024-12-18 22:29:05

下面的代码似乎按预期工作 - 它将背景颜色从红色切换为蓝色(在 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 脚本中?在工作示例中,我使用 XUI 的 ready() 函数来确保 DOM 已加载。

还值得注意的是,下面的代码是等效的,因为无论如何您都在使用 XUI:

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

The below code seems to work as expected—it toggles the background color from red to blue (tested in FireFox 8.0 and 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>

Just to confirm, I assume the document.getElementId() you originally used was part of a function or enclosed in some onLoad script? In the working example I used XUIs ready() function to make sure the DOM had loaded.

It's also worth noting that the below code is equivalent, since you're using XUI anyway:

x$.ready(function() { 
    x$('#nearest').click(function(){
        x$("#popup").toggleClass('hide');
    });
}); 
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文