Блог

Главная - Вопросы по программированию - Проверка и изменение класса Jquery

Проверка и изменение класса Jquery

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Вчера я опубликовал вопрос, в котором просил помочь с написанным мной сценарием переключения изображений, спасибо всем, кто мне помог. Я расширил скрипт и столкнулся с проблемой, которую я не могу определить, в чем проблема.

HTML:

 <div id="feature-image">
    <h1><span>A random heading</span></h1>
</div>

<div id="feature-links">
    <a class="a1" href="#">1</a>
    <a class="a2" href="#">2</a>
    <a class="a3" href="#">3</a>
</div>

JS Jquery:

 $(function(){
    $('#feature-links a').click(function() {

        if ($(this).hasClass('a-active')) {
            return false;
        } else {

    var image = $(this).attr('class');

        switchToImg(image, function() {
            $('#feature-links a .a-active').removeClass('a-active'); 
            $('#feature-links .'   image).addClass('a-active');
        });
    }
});

function switchToImg(image){
    $('#feature-image').fadeOut('300', function(){
        $('#feature-image').css('background-image','url(images/main_'   image   '.jpg)');
        $('#feature-image').fadeIn('300');
    });     
};

В скрипте, который я проверяю на наличие a click в <a> теге, каждый <a> тег имеет класс (a1, a2, a3 и т.д.). Кроме того, активный <a> имеет класс ‘a-active’.

Я пытаюсь проверить a-active , установлен ли этот параметр:

 if ($(this).hasClass('a-active')) {
    return false;
}

и вырежьте скрипт там, чтобы он не исчезал в одном и том же изображении. Однако изображение продолжает исчезать и исчезать, несмотря на то, что я возвращаю false при проверке класса a-active и возвращаю false. Я уверен, что проблема в разделе, который я использую .addClass , и .removeClass но мои знания Javascript и Jquery слишком слабы, чтобы я мог правильно отладить это.

Не мог бы кто-нибудь критически взглянуть на это, пожалуйста?

Заранее спасибо.

Ответ №1:

Вы неправильно передали анонимную функцию своей switchToImg() функции, которая ее не принимает.

Вместо этого попробуйте следующий JS:

 $(function() {
    $('#feature-links a').click(function() {

        if ($(this).hasClass('a-active')) {
            return false;
        } else {
            var image = $(this).attr('class');

            switchToImg(image);
        }
    });

    function switchToImg(image) {
        $('#feature-image').fadeOut('300', function() {
            $('#feature-image').css('background-image', 'url(images/main_'   image   '.jpg)');
            $('#feature-image').fadeIn('300');
        });
        $('#feature-links a.a-active').removeClass('a-active');
        $('#feature-links .'   image).addClass('a-active');
    };
});

Протестировано в jsFiddle.

РЕДАКТИРОВАТЬ: я удалил вызов .stop() , в этом не было необходимости, и ввел ошибку.

Комментарии:

1. Спасибо, Грег! Это решило мою проблему! 🙂

2. Если вам интересно, я ужесточил свой код в этой редакции jsFiddle: jsfiddle.net/rPFTd/3 .

3. Я действительно ценю, что вы это делаете, мой код был хм… как бы это сказать … любитель! Это на самом деле дало мне представление о точечной нотации, которую я никогда по-настоящему не ценил. Спасибо (еще раз!)

4. Если вы хотите получить точную оценку качества вашего кода jQuery, попробуйте использовать jQueryLint . Он очень быстро обнаружит ошибки, такие как отсутствие кэширования результатов селектора! Другое увеличение скорости заключается в использовании $(selector, context) перегрузки функции jQuery для ограничения того, где движок должен искать что-то, соответствующее селектору.

5. switchToImg() Функция в значительной степени не изменилась по сравнению с моим первоначальным ответом — все, что я сделал, это кэшировал $('#feature-image') селектор в переменной и использовал цепочку. Последние 2 строки — это то, что удаляет a-active класс и устанавливает его на элемент, который только что щелкнул. К вашему сведению, я также снова сделал другую версию, немного отличающуюся: jsfiddle.net/rPFTd/7 .

Ответ №2:

Попробуйте изменить $('#feature-links a .a-active') на $('#feature-links a.a-active') .

Пробел между a и .a-active означает, что вы пытаетесь сопоставить потомков <a> с классом a-active .

Ответ №3:

Вы можете использовать:not selector для фильтрации активного класса.

$(‘#ссылки на объекты a:not(.a-active)’)