javascript - 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，但图像继续淡入淡出。并返回错误。我确定问题出在我使用的部分 .addClass和 .removeClass但我对 Javascript 和 Jquery 的了解对我来说很难正确调试它。

请问有人可以批评一下吗？

提前致谢。

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() 的调用，这不是必需的并且引入了错误。