Jquery类检查和更改

昨天我发布了一个问题，要求我写一个图像切换脚本的帮助，谢谢所有帮助我。我已经扩展了脚本，遇到了一个问题，我不能在我的生活中发现问题所在。Jquery类检查和更改

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>标签有一个类（A1，A2，A3等等。）。另外，活动的<a>有一类“非活动”。

我试图检查a-active设置与此：

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

切脚本有那么它不会淡入淡出相同的图像。然而，尽管我在检查类a-active并返回错误时返回错误，但图像仍然淡入淡出。我确定问题在于我使用的部分是.addClass和.removeClass，但是我对JavaScript和Jquery的知识对于我来说是正确的调试。

请问有人可以批评这个吗？

在此先感谢。

来源

2011-10-27 David Barker

你错误地传递了一个匿名函数您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()，这是没有必要的，并引入了一个错误。

来源

2011-10-27 08:24:41 GregL

谢谢Greg！这已经整理了我的问题！ :) –

没问题！乐意效劳。 – GregL

如果你有兴趣，我在这个jsFiddle修订版中收紧了我的代码：http://jsfiddle.net/rPFTd/3/。 – GregL

尝试更改$('#feature-links a .a-active')至$('#feature-links a.a-active')。

a和.a-active之间的空格表示您试图将<a>的后代与类a-活动相匹配。

来源

2011-10-27 08:17:03 socha23

感谢您发现此错误！ –

您可以使用:not选择器筛选出活动类。

$（“＃功能链接：不是（.A有效）”）

来源

2011-10-27 08:19:31 Godzilla

Jquery类检查和更改

回答

相关问题