jQuery-如果主体有一个X类，那么将滑块的旋转速度更改为X

Question

我正在尝试为特色滑块编写一个函数。

基本上，在一页上我希望旋转速度为10000，在另一页上，我希望速度为3000。

我有两个单独的函数-这是有效的-但我知道有一种更干净/更好的方法可以做到这一点，而不需要重复所有的代码。。。

有人能帮忙吗？

$(function(){
  $("body.homePage #featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 10000, true);  
  $("body.homePage #featured").hover(  
    function() {  
      $("body.homePage #featured").tabs("rotate",0,true);
    },  
    function() {  
      $("body.homePage #featured").tabs("rotate",10000,true);  
    }
  );    
});
$(function(){
  $("body.boatDetailsPage #featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 3000, true);  
  $("body.boatDetailsPage #featured").hover(  
    function() {  
      $("body.boatDetailsPage #featured").tabs("rotate",0,true);
    },  
    function() {  
      $("body.boatDetailsPage #featured").tabs("rotate",3000,true);  
    }
  );    
});

类似的东西

if ($('body').hasClass('homePage')) {
  $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 10000, true);  
  $("#featured").hover(  
    function() {  
      $("#featured").tabs("rotate",0,true);
    },  
    function() {  
      $("#featured").tabs("rotate",10000,true);  
    }
  );   
} else { 
  $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 3000, true);  
  $("#featured").hover(  
    function() {  
      $("#featured").tabs("rotate",0,true);
    },  
    function() {  
      $("#featured").tabs("rotate",3000,true);  
    }
  );   
}

Answer 1

试试这个：

$(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",0,true);},  
    function() {  
    $("body.boatDetailsPage #featured").tabs("rotate",rotateSpeed,true);  
    });    
});

Answer 2

此解决方案的好处之一是，您可以添加任意数量的不同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",0,true);
        },  
        function() {  
          $featured.tabs("rotate",duration,true);  
        }
      );    
  }
});

Answer 3

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