jQuery類檢查和更改

Question

我昨天發布了一個問題，要求我寫的圖像切換腳本有所幫助，謝謝您提供的所有幫助。 我擴展了腳本，遇到了一個問題，我無法終生發現問題所在。

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');
    });     
};              

在腳本中，我檢查是否click了<a>標記，每個<a>標記都有一個類（a1，a2，a3等）。 同樣，主動<a>具有“ a-active”類別。

我正在嘗試檢查是否為此設置了a-active ：

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

並在此處剪切腳本，以使其不會淡入淡出同一張圖片。 但是，盡管我在檢查a-active類時返回false並返回false，但是圖像仍繼續淡入淡出。 我確定問題出在我使用.addClass和.removeClass的部分中，但是我對Javascript和Jquery的了解對我來說.addClass ，可以對其進行正確調試。

有人可以對此批評一下嗎？

提前致謝。

Answer 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()的調用，這是沒有必要的，並引入了一個錯誤。

Answer 2

嘗試將$('#feature-links a .a-active')更改$('#feature-links aa-active') 。

.a和.a-active之間的空格表示您正在嘗試將<a>的后代與a-active類進行匹配。

Answer 3

您可以使用：not選擇器來過濾掉活動類。

$（'＃feature-links a：not（.a-active）'）