Shorhand在JavaScript的代碼具有相同的價值觀

Question

我有不同的代碼是這樣的：

  $(function() { 

      $('#slider1').carouFredSel({ 
       auto: false, 
       infinite:false,     
       circular:false, 
       prev:'#prev1', 
       next:'#next1', 
       pagination:"#pager1", 
       mousewheel:true, 
       swipe: { 
        onMouse: true, 
        onTouch: true 
       } 
      }); 

     $('#slider2').carouFredSel({ 
       auto: false, 
       infinite:false,     
       circular:false, 
       prev:'#prev2', 
       next:'#next2', 
       pagination:"#pager2", 
       mousewheel:true, 
       swipe: { 
        onMouse: true, 
        onTouch: true 
       } 
      });   
     }); 

     window.addEvent('domready', function(){
 

    var container = document.id('container'), 
    queuedElems = []; 

    var sorter = new Fx.Sort($$('#container .sort'), { 
    duration: '1000', 
    transition: Fx.Transitions.Back.easeInOut, 
    mode: 'vertical', 
    onComplete: function(){ 
     displayDOM(); 
     } 
    }); 

    displayDOM(); 

    document.id('swap').addEvent('click', function(event){ 
    event.stop(); 
    var elems = container.getChildren(); 
    sorter.swap(elems[0], elems[elems.length - 1]); 
    }); 



    window.addEvent('domready', function(){ 

    var container = document.id('container2'), 
    queuedElems = []; 

    var sorter = new Fx.Sort($$('#container2 .sort'), { 
    duration: '1000', 
    transition: Fx.Transitions.Back.easeInOut, 
    mode: 'vertical', 
    onComplete: function(){ 
     displayDOM(); 
     } 
    }); 

    displayDOM(); 

    document.id('swap2').addEvent('click', function(event){ 
    event.stop(); 
    var elems = container.getChildren(); 
    sorter.swap(elems[0], elems[elems.length - 1]); 
    }); 

我想他們，因爲每次在每個代碼的設置要寫入的「速記」方式同樣，只有ID名稱更改（ID1，ID2 ...）。我不知道如何在JavaScript中做到這一點（只在CSS中）。我唯一知道的是你需要'var'標籤。

任何有一點知識的人都可以輕鬆做到。我嘗試了很多組合，但總是失敗。一個例子會很好。它困難嗎？

Answer 1

你可以做兩件事情： 使用,選擇通過ID多個元件，或者指定一個普通類（.slider）

$('#slider1, #slider2').carouFredSel({ 
      auto: false, 
      infinite:false,     
      circular:false, 
      prev:'#prev1', 
      next:'#next1', 
      pagination:"#pager1", 
      mousewheel:true, 
      swipe: { 
       onMouse: true, 
       onTouch: true 
      } 
     }); 

或設置保存到一個變量

var mySettings = { 
      auto: false, 
      infinite:false,     
      circular:false, 
      prev:'#prev1', 
      next:'#next1', 
      pagination:"#pager1", 
      mousewheel:true, 
      swipe: { 
       onMouse: true, 
       onTouch: true 
      } 
     }; 
    $('#slider1').carouFredSel(mySettings); 

    $('#slider2').carouFredSel(mySettings); 

Answer 2

剛分配所有這些元素的通用類，並且同時爲所有這些元素初始化插件 - 例如$('.slider')而不是$('#slider1')。