Adding a integer to a css class with jQuery

Question

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

Sounds like a bad design - why do you need this? Perhaps using data-* attributes would be a better option? — Oded
– Oded, Commented May 8, 2013 at 12:16
Don't have to, if you have a fixed amount of icons you can store them in an array. Declare that array in your $(document).ready and closure will keep that array in scope to use. — HMR
– HMR, Commented May 8, 2013 at 12:22
@Oded really? data-* attributes? I agree that OP's solution seems misguided, but what's wrong with using an array to represent sequential data in JavaScript that you suggest storing the data in the DOM? — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented May 8, 2013 at 12:49
@BenjaminGruenbaum - I don't know enough about the actual requirements to offer such a solution. I don't know why the OP is using the DOM in this way, but at data-* attributes are more semantic and better suited than abusing the class attribute. — Oded
– Oded, Commented May 8, 2013 at 13:00

Ram · Accepted Answer · 2013-05-08 12:43:24Z

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/

edited May 8, 2013 at 12:43

answered May 8, 2013 at 12:29

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HMR Over a year ago

Nice way to combine the clicks, If you don't mind I'll borrow that and implement setting and removing class using an arrray. This because #slider might have other classes on it and someone might have a situation where they use "coldest", "colder","cold","warm","warmer","warmest","hot".... There a counter won't work

HMR · Accepted Answer · 2013-05-08 13:04:08Z

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

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.

edited May 8, 2013 at 13:04

answered May 8, 2013 at 12:19

HMR

39.5k26 gold badges99 silver badges175 bronze badges

3 Comments

CraigduToit Over a year ago

This works really well, except it returns 'icon-undefined' for any ranges above 10 or below 0. Which would be fine if I could stop a user from constantly going forwards and backwards outside of 1-10.

HMR Over a year ago

It's not going below 0 or above 10. Code resets counter to 0 when over 10 and sets to 10 when under 0. If you would like to ignore back when going under zero then uncomment the added code and delete the counter=(counter....)?...:counter lines

HMR Over a year ago

I've updated the answer to combine the two events into one function. Should have done it in the first place but would have taken too long to code the answer. Thanks to undefined for showing it.

Collectives™ on Stack Overflow

Adding a integer to a css class with jQuery

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related