如何解决jQuery-如果主体具有X类,则将滑块的旋转速度更改为X
|| 我正在尝试为精选滑块编写函数。 基本上,在一页上我希望转速为10000,而在另一页上我希望转速为3000。 我分别拥有两个功能-可以正常工作-但我知道将有一种更干净/更好的方式来做到这一点而无需重复所有代码... 有人可以帮忙吗?$(function(){
$(\"body.homePage #featured\").tabs({fx:{opacity: \"toggle\"}}).tabs(\"rotate\",10000,true);
$(\"body.homePage #featured\").hover(
function() {
$(\"body.homePage #featured\").tabs(\"rotate\",true);
},function() {
$(\"body.homePage #featured\").tabs(\"rotate\",true);
}
);
});
$(function(){
$(\"body.boatDetailsPage #featured\").tabs({fx:{opacity: \"toggle\"}}).tabs(\"rotate\",3000,true);
$(\"body.boatDetailsPage #featured\").hover(
function() {
$(\"body.boatDetailsPage #featured\").tabs(\"rotate\",function() {
$(\"body.boatDetailsPage #featured\").tabs(\"rotate\",true);
}
);
});
就像是
if ($(\'body\').hasClass(\'homePage\')) {
$(\"#featured\").tabs({fx:{opacity: \"toggle\"}}).tabs(\"rotate\",true);
$(\"#featured\").hover(
function() {
$(\"#featured\").tabs(\"rotate\",function() {
$(\"#featured\").tabs(\"rotate\",true);
}
);
} else {
$(\"#featured\").tabs({fx:{opacity: \"toggle\"}}).tabs(\"rotate\",true);
}
);
}
解决方法
尝试这个:
$(function(){
// if body has class X speed will be 10000,else 3000
var rotateSpeed = $(\"body\").hasClass(\'X\') ? 10000 : 3000;
$(\"body.boatDetailsPage #featured\").tabs({fx:{opacity: \"toggle\"}}).tabs(\"rotate\",rotateSpeed,true);
$(\"body.boatDetailsPage #featured\").hover(
function() {
$(\"body.boatDetailsPage #featured\").tabs(\"rotate\",true);},function() {
$(\"body.boatDetailsPage #featured\").tabs(\"rotate\",true);
});
});
, 此解决方案的好处之一是,您可以添加任意数量的body
类来进行检查,并对每个类应用不同的动画持续时间
$(function(){
var duration = 0;
var $body = $(\'body\');
var $featured = $body.find(\'#featured\');
if($body.is(\'.homePage\')) {
duration = 10000;
} else if($body.is(\'.boatDetailsPage\')) {
duration = 3000;
}
if(duration > 0) {
$featured
.tabs({fx:{opacity: \"toggle\"}})
.tabs(\"rotate\",duration,true)
.hover(
function() {
$featured.tabs(\"rotate\",true);
},function() {
$featured.tabs(\"rotate\",true);
}
);
}
});
, function rotateBehavior(selector,time){
$(selector)
.tabs({fx:{opacity: \"toggle\"}})
.hover(
rotateMe(selector,0),rotateMe(selector,time)
);
rotateMe(selector,time);
}
function rotateMe(selector,time){
$(selector).tabs(\"rotate\",time,true);
}
$(function(){
var time = $(\'body\').hasClass(\'homePage\') ? 10000 : 3000;
var selector = \'#featured\';
rotateBehavior(selector,time);
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。