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的了解对于我来说是正确的调试。

有人可以批评一下吗？

提前致谢。

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 a.a-active')。

a和.a-active之间的空格意味着您正在尝试匹配＆lt; a＆gt;的后代。有一个积极的类。

Answer 3

您可以使用:not选择器过滤掉有效课程。

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

Jquery类检查和更改

3 个答案: