Question

I’m currently working on a small jQuery element and I’m getting along quite fine with some help of the google search and some of my older work. But now I hit something and I’m a bit stuck.

Here is the jsFiddle of the element: http://jsfiddle.net/HeAyW/

As you can see it’s an pretty easy selector thing. You can click the numbers to get an input, you can click the + and – button to change the input and the background of the numbers change of you click on it.

But the problem is that when you press the + or – button it does not change the class of the span, while the number in the input does change. I think it has something to do with sibblings but I can’t put my finger on it.

Code reference

jQuery(document).ready(function() {

$('.spanval').click(function(){
    $('#hourvalue').val($(this).text());
});

    $('.spanval').click(function(){
        $('.spanval_active').removeClass('spanval_active');
         $(this).addClass('spanval_active');
    });

jQuery('.hour_dropdown').hide()

jQuery('.more').click(function() {
    $('.hour_dropdown').fadeToggle(200);
});

});

Answer 1

You never bound anything to the Add and Subtract links. I was going to do just that, then got kind of carried away. I took out your inline Javascript, and made a universal handler for the adding and removing of classes. You can also now type a number to change the class.

http://jsfiddle.net/HeAyW/3/

EDIT

I updated such that each index has an attribute “data-num” which can be read by jQuery as the positive value of the index.

Notice the changes in the HTML and the last line of JS

http://jsfiddle.net/HeAyW/4/