2

这是我的代码，现在它需要做的是增加类名'icon-'之后的整数，这样每次点击'icon-'类都会获得更高的整数值ex。点击 -> 'icon-2'，点击 -> '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);
        });
    });
4

2 回答 2

2 
$('.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-08T12:29:04.383 回答
0 
$(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").data 以专门用于此滑块。

于 2013-05-08T12:19:38.027 回答