使用jQuery向css類添加一個整數

這是我有的代碼，現在需要做的是在類名'icon-'之後增加整數，這樣每次點擊'icon-'類都會得到一個較高的整數值ex。點擊 - >'icon-2'，點擊 - >'icon-3'等等。使用jQuery向css類添加一個整數

請記住，顯示給用戶的當前圖標是'icon-1'。

此外，有沒有辦法讓我提醒它是否擊中'icon-10'或阻止它試圖超過'icon-10'或低於'icon-1'。

$(function() { 
     a = 2, 
     b = '', 

     $('.icon-step-backward').click(function(){  
      $('#slider').removeClass(); 
      $('#slider').addClass('icon-' - a); 
     }); 

     $('.icon-step-forward').click(function(){ 
      $('#slider').removeClass('icon-'); 
      $('#slider').addClass('icon-' + a); 
     }); 
    });

來源

2013-05-08 CraigduToit

聽起來像一個糟糕的設計 - 你爲什麼需要這個？也許使用'data- *'屬性會是更好的選擇？ – Oded 2013-05-08 12:16:20

不需要，如果你有一個固定數量的圖標，你可以將它們存儲在一個數組中。在$（document）.ready中聲明該數組，並且閉包將保持該數組在範圍內的使用。 – HMR 2013-05-08 12:22:58

@真的嗎？ 'data- *'屬性？我同意OP的解決方案似乎被誤導了，但是如何使用數組來代表JavaScript中的順序數據，您建議將數據存儲在DOM中有什麼問題？ – 2013-05-08 12:49:21

$(function() { 
    var classes=["icon-1","icon-2","icon-3","icon-4","icon-5","icon-6" 
     ,"icon-7","icon-8","icon-9","icon-10"]; 
    var classCounter=0; 
    $('.icon-step-backward, .icon-step-forward').click(function() { 
     //caching slider object 
     var $slider = $('#slider'), 
     s = $(this).hasClass('icon-step-backward') ? -1 : 1, 
     tmp=counter+s, 
     disableButton=(s==-1)?'.icon-step-backward':'.icon-step-forward', 
     enableButton=(s==-1)?'.icon-step-forward':'.icon-step-backward'; 
     $(enableButton).show(); 
     if(tmp<classes.length && tmp>0){ 
     $slider.removeClass(classes[counter]); 
     counter=counter+s; 
     $slider.addClass(classes[counter]); 
     }else{ 
     $(disableButton).hide(); 
     } 
    }); 
});

如果你不得不操縱多個滑塊（#slider建議以其他方式）比你可以添加classCounter爲$（「＃滑蓋」）多.icon步按鈕。數據具體使用爲這個滑塊。

來源

2013-05-08 12:19:38 HMR

這個效果非常好，除非它返回10或以下的任何範圍的'icon-undefined'。如果我可以阻止用戶在1-10之外不斷前進和後退，那麼這很好。 – CraigduToit 2013-05-08 12:30:23

它不低於0或高於10.代碼重置計數器爲0時，超過10，並設置爲10時，如果你想忽略回零時，則取消註釋添加的代碼並刪除計數器=（計數器。 ...）？...：計數器行 – HMR 2013-05-08 12:36:37

謝謝，這完美無缺！ – CraigduToit 2013-05-08 12:43:20

$('.icon-step-backward, .icon-step-forward').click(function() { 
    var s = $(this).hasClass('icon-step-backward') ? -1 : 1; 
    $('#slider').prop('className', function (_, p) { 
     return p.replace(/\d+/g, function (n) { 
      var j = +n + s; 
      return j <= 10 && j >= 1 ? j : n; 
     }); 
    }); 
});

http://jsfiddle.net/Mwcbp/

來源

2013-05-08 12:29:04 undefined

結合點擊的好方法，如果你不介意我會借用它並使用arrray實現設置和刪除類。這是因爲#slider可能有其他類，有人可能會有他們使用「最冷」，「較冷」，「冷」，「溫暖」，「溫暖」，「最熱」，「熱」....有一個櫃檯不會工作 – HMR 2013-05-08 12:44:30

@HMR我不介意:) – undefined 2013-05-08 12:47:15

完成，更新了我的答案。謝謝。 – HMR 2013-05-08 13:06:06

使用jQuery向css類添加一個整數

回答

相關問題