CODEWITHSUNDEEP
jquery
user3450590
user3450590

Reputation: 341

event does not work the second time on first click

i wanted a simple on-off switch where when i click on the off switch the on become deactivated , and similarly when i click on the on switch.

I tried the following code, but i works fine the first time i switch, but the second time the event works on the second click.

jquery i made:

 var offbtnpress = true;

    $('.offbtn').click(function () {
        if (offbtnpress) {
            $(this).removeClass('btn-default1').addClass('btn-primary');
            $(this).next('.onbtn').removeClass('btn-primary').addClass('btn-default1');
        }
        else {
            $(this).removeClass('btn-primary').addClass('btn-default1');
            $(this).next('.onbtn').removeClass('btn-default1').addClass('btn-primary');
        }
        offbtnpress = !offbtnpress;
    });

    var onbtnpress = true;

    $('.onbtn').click(function () {
        if (onbtnpress) {
            $(this).removeClass('btn-default1').addClass('btn-primary');
            $(this).prev('.offbtn').removeClass('btn-primary').addClass('btn-default1');
        }
        else {
            $(this).removeClass('btn-primary').addClass('btn-default1');
            $(this).prev('.offbtn').removeClass('btn-default1').addClass('btn-primary');
        }
        onbtnpress = !onbtnpress;
    });

html:

 <span class="btn btn-default1 pull-right borderrad2 offbtn" style="margin: 0 !important">Off</span>
                                        <span class="btn btn-primary pull-right borderrad1 onbtn" style="margin: 0 !important">On</span>

Please see the fiddle: https://jsfiddle.net/2hLdyajp/2/

Thanks in advance

Upvotes: 0

Views: 295

Answers (3)

bvx89
bvx89

Reputation: 888

I've written a solution that resembles the one @j08691 submitted, but I tried to make it more general.

https://jsfiddle.net/2hLdyajp/8/

HTML:

<span class="buttons noselect">
    <span class="btn btn-default pull-right borderrad2" style="margin: 0 !important">Off</span>
    <span class="btn btn-default pull-right borderrad1 btn-primary" style="margin: 0 !important">On</span>
</span>

I put the buttons inside a span that incapsulates them, and the only thing that differs between the buttons are the borderrad and btn-primary. Whatever class is the primary will be the selected one.

JS:

$('.buttons').click(function () {
    $(this).children().toggleClass('btn-primary');
});

The toggleClass takes care of checking the current class of the object, so you don't need to store that as a boolean variable. This method will also work if you were to include more buttons inside. Of course, I needed to change the CSS first.

If you need to find out which button was pressed, use this fiddle instead: http://jsfiddle.net/2hLdyajp/9/

Upvotes: 0

Kevin Seifert
Kevin Seifert

Reputation: 3572

Only use one variable to track the toggle state:

https://jsfiddle.net/spefhykp/

var offbtnpress = true;

$('.offbtn').click(function () {
    if (offbtnpress) {
        $(this).removeClass('btn-default1').addClass('btn-primary');
        $(this).next('.onbtn').removeClass('btn-primary').addClass('btn-default1');
    }
    else {
        $(this).removeClass('btn-primary').addClass('btn-default1');
        $(this).next('.onbtn').removeClass('btn-default1').addClass('btn-primary');
    }
    offbtnpress = !offbtnpress;
});

//    var onbtnpress = true;

$('.onbtn').click(function () {
    if (!offbtnpress) {
        $(this).removeClass('btn-default1').addClass('btn-primary');
        $(this).prev('.offbtn').removeClass('btn-primary').addClass('btn-default1');
    }
    else {
        $(this).removeClass('btn-primary').addClass('btn-default1');
        $(this).prev('.offbtn').removeClass('btn-default1').addClass('btn-primary');
    }
    offbtnpress = !offbtnpress;
});

Upvotes: 1

j08691
j08691

Reputation: 207861

Why not just do:

$('.offbtn, .onbtn').click(function () {
    $('span.btn').toggleClass('btn-primary btn-default1')
});

jsFiddle example

Upvotes: 2

Related Questions