jQuery - запуск функции, когда имена классов добавлены и / или удалены - PullRequest
Новая
       15

jQuery - запуск функции, когда имена классов добавлены и / или удалены

1 голос
/ 10 марта 2011

Я разрабатываю функцию с условным оператором, который (пока) должен запускать оповещение, когда имя класса удаляется из слоя div. Вот код: 

<div class="ui-tabs-panel ui-tabs-hide">panel</div>
<div><a href="#" class="control">control</a></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=3.0"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
    $('.control').hover(
        function() {
            $('.ui-tabs-panel').removeClass('ui-tabs-hide');
        },
        function() {
            $('.ui-tabs-panel').addClass('ui-tabs-hide');
        }
    );
    if ($('.ui-tabs-panel:not(.ui-tabs-hide)')) {
        alert('hello');
    }
});
//-->
</script>

Вся ссылка «control» и связанная с ней функция как раз служат для запуска добавления и удаления имени класса.

Прямо сейчас, предупреждение появляется, когда страница загружена, и не должно, так что я думаю, что я, должно быть, неправильно понимаю синтаксис. Удаление класса ui-tabs-hide из div с помощью ссылки «control» не вызывает оповещение, а должно. Я предполагаю, что есть какое-то связующее событие, которое мне нужно включить, но я не очень хорошо знаю связыватели событий.

Может кто-нибудь помочь мне с этим, пожалуйста?

Ответы [ 2 ]

0 голосов
/ 10 марта 2011

Вы можете создать собственное событие

демо http://jsfiddle.net/k44qR/2/

   $(document).ready(function(){
    $('.control').hover(
        function() {
            $('.ui-tabs-panel').removeClass('ui-tabs-hide').trigger("displayPanel");
        },
        function() {
            $('.ui-tabs-panel').addClass('ui-tabs-hide');
        }
    );

    $('.ui-tabs-panel').bind("displayPanel",function(){alert("hello")});

});
0 голосов
/ 10 марта 2011

Я не знаю, можете ли вы обнаружить «событие», такое как манипулирование именем класса в элементе.

Причина, по которой вы видите предупреждение при загрузке страницы, заключается в том, что оно находится в блоке if, содержащемся в функции $(document).ready jQuery, которая срабатывает один раз при загрузке страницы. По сути, вы не прикрепили это ни к какому событию, кроме события DOM ready. Поэтому он запускается, когда страница загружается и DOM готов, а оператор if оценивается как true.

Вы также должны использовать свойство .length в своем выражении: 

if ($('.ui-tabs-panel:not(.ui-tabs-hide)').length) {
    alert('hello');
}

// Or...
if ($('.ui-tabs-panel').not('.ui-tabs-hide').length) {
    alert('hello');
}

Примечание

Я просто хотел бы предупредить, что приведенный выше код будет зависеть от того, что вы пытаетесь сделать с вашими действиями по обнаружению изменений класса - .length даст вам общее количество подходящих элементов, так что если у вас больше one .ui-tabs-panel, это может дать вам ложный положительный результат. Вам нужно будет рассмотреть что-то вроде вызова .each() для результата jQuery, если вы хотите что-то сделать с результатами или что-то еще, если результат более одного.

Можно было бы запустить тайм-аут и попытаться проверить, есть ли у элементов класса ui-tabs-panel также класс ui-tabs-hide:

http://jsfiddle.net/userdude/4cF5v/

$(document).ready(function(){
    $('.control').hover(
        function() {
            $('.ui-tabs-panel').removeClass('ui-tabs-hide');
        },
        function() {
            $('.ui-tabs-panel').addClass('ui-tabs-hide');
        }
    );
    runCheck();
});

function runCheck(){
    if ($('.ui-tabs-panel').hasClass('ui-tabs-hide')) {
        alert('hello');
    }
    setTimeout(function(){runCheck()},5000);
}

Я создал функцию runCheck(), поместил в нее вызов .hasClass(), а затем создал тайм-аут, который снова запустится runCheck(), снова установите тайм-аут и продолжайте.

Я установил тайм-аут на 5000, чтобы ваш браузер не входил в бесконечный цикл (он проверяется каждые 5 секунд). На практике это, вероятно, должно быть настроено где-то между 50 и 500; 1000 равно 1000 миллисекундам или 1 секунде.

Вот он с тайм-аутом 50 миллисекунд и другим методом, который не блокирует ваш компьютер в цикле alert():

http://jsfiddle.net/userdude/k44qR/

Наведите указатель мыши на контрольную ссылку, затем наведите курсор мыши, а затем снова наведите курсор мыши, и вы увидите, как он запускается, останавливается и снова запускается.

...