Ошибка XUI toggleClass

Question

Ошибка XUI toggleClass

У меня есть вход, который я нажимаю, то это событие называется:

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

0

javascript xui

Источник

user228660 25 окт '11 в 09:58

1 ответ

Другие вопросы по тегам javascript xui

user935323 01 дек '11 в 15:05 2011-12-01 15:05 · Answer 1 · 2011-12-01 15: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');
    });
});