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);
});