CODEWITHSUNDEEP
javascriptjqueryhtmlcssclass
CraigduToit
CraigduToit

Reputation: 33

Adding a integer to a css class with jQuery

This is the code I have, now what it needs to do is increase the integer after the class name 'icon-' so that on each click the 'icon-' class gets a higher integer value ex. click -> 'icon-2', click -> 'icon-3' and so forth.

Bare in mind that the current icon shown to the user is 'icon-1'.

Also, is there a way for me to alert if it hits 'icon-10' or prevent it from trying to go further than 'icon-10' or below '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);
        });
    });

Upvotes: 2

Views: 461

Answers (2)

HMR
HMR

Reputation: 39250

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

If you have multiple .icon-step buttons having to manipulate multiple slider (#slider suggest otherwise) than you can add the classCounter as $("#slider").data to be used specifically for this slider.

Upvotes: 0

Ram
Ram

Reputation: 144669

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

Upvotes: 2

Related Questions