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）'）