CODEWITHSUNDEEP
jqueryclasshtml
Peter Boomsma
Peter Boomsma

Reputation: 9808

add/remove class span closest

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

});

Upvotes: 0

Views: 704

Answers (3)

Kyle Macey
Kyle Macey

Reputation: 8154

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/

Upvotes: 1

JDavis
JDavis

Reputation: 3318

As @OJay mentioned you have the onclick event declared inline. It's a good idea to keep all your JS code together.

Basically you weren't changing the .spanval_active class in your onclick event handler for the plus and minus elements.

Here is one approach: http://jsfiddle.net/PcWjA/2/

jQuery(document).ready(function() {
        // You can set this to a default hour and then call update_hour()
        var hour = 0;

        $('.spanval').click(function() {
            hour = $(this).text();
        });

        $('.subtract').click(function() {
            hour--;
        });

        $('.add').click(function() {
            hour++;
        });

        $('.spanval, .subtract, .add').click(function() {
            update_hour();
        });

        function update_hour()
        {
            $('.spanval_active').removeClass('spanval_active');

            $('.spanval').eq( hour - 1 ).addClass('spanval_active');

            $('#hourvalue').val( hour );
        }

        //update_hour();

        jQuery('.hour_dropdown').hide()

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

    });​

Upvotes: 0

OJay
OJay

Reputation: 4921

Your event handlers for the add and subtract 'buttons' are inline and very simply only increment (or decrement) the number in the hourvalue box, there is no code to change the class of the same relevant number (.spanval element). Add some code to the on click of the + and - button to add/remove classes as required. Or potentially add some code for the change event in the hourvalue box to add the class to the relevant number if not there already

Upvotes: 0

Related Questions