Question

这是我的代码，现在它需要做的是在类名'icon-'之后增加整数，这样每次点击'icon-'类得到一个更高的整数值ex。点击 - ＆gt; 'icon-2'，点击 - ＆gt; 'icon-3'等等。

请注意，向用户显示的当前图标为“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);
        });
    });

Answer 1

$('.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/

Answer 2

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

如果你有多个.icon-step按钮必须操纵多个滑块（#slider建议不这样做），你可以将classCounter添加为$（“＃slider”）。数据专门用于这个滑块。

使用jQuery将整数添加到css类

2 个答案: