我昨天发布了一个问题,要求对我编写的图像切换脚本提供一些帮助,感谢所有帮助我的人。我扩展了脚本并遇到了一个问题,我一生都无法找出问题所在。
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 的了解对我来说很难正确调试它。
请问有人可以批评一下吗?
提前致谢。
最佳答案
您错误地将匿名函数传递给了您的 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()
的调用,这不是必需的并且引入了错误。
关于javascript - Jquery 类检查和更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7913235/