combining jquery click functions

Question

I am quite new to jquery and was wondering if someone could recommend some ways I could combine these functions together so that the code would be more efficient and slimmed down. I basically have two click functions that do the exact same thing but are targeting two different buttons. Thank you.

        $( ".step1 button" ).click(function() {     
            if ($(".step1 input").is(":checked")) { 
                $( ".step1").slideUp("slow",function(){
                    $(".step2").slideDown("slow");
                });
            } // end if
            else{
                $("div.error").remove();
                $(".step1.step-heading").append("<div class='error'><i class='fa fa-exclamation-triangle'></i> Please make a selection before continuing</div>");
            } // end else         
        })// end click function

        $( ".step2 button" ).click(function() {     
            if ($(".step2 input").is(":checked")) { 
                $( ".step2").slideUp("slow",function(){
                    $(".step3").slideDown("slow");
                });
            } // end if
            else{
                $("div.error").remove();
                $(".step2.step-heading").append("<div class='error'><i class='fa fa-exclamation-triangle'></i> Please make a selection before continuing</div>");
            } // end else         
        })// end click function

Did you check jQuery multiple selectors - jQuery.com - Multiple Selector (“selector1, selector2, selectorN”)? — Techie
– Techie, Commented Feb 6, 2016 at 14:26

JotaBe · Accepted Answer · 2016-02-06 14:28:24Z

1

You can access the DOM element tha trigger the event by using $(this) inside the vent handler.

So, you simply have to attach the same handler to several elements, and use $(this) inside the implementation of the handler.

$(".step1 button").add(".step2 button").click(function() {
    // $(this) refered to the button tha triggered the event
}

To make easier to find the step number you can use a custom "data-" attribute, for example like this:

<button data-step-no="1">

You can get that attribute by using $(this).attr('data-step-no'), In fact, to add or substract, you need to parse it like this: var stepno = parseInt($(this).attr('data-step-no').

To select all the buttons wit a single selector you can use buttons like this:

<button data-step-no="1" class="step">
<button data-step-no="2" class="step">

Ans select them all in a single step:

$('button .step').click(...

edited Feb 6, 2016 at 14:28

answered Feb 6, 2016 at 14:19

JotaBe

39.3k9 gold badges102 silver badges121 bronze badges

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

Comments

Tomanow · Accepted Answer · 2016-02-06 14:30:30Z

1

Here is a simple refactor that will not require changes to HTML:

$('[class^="step"]').each(function(k, v) {
    var $btn       = $(v).find('button'),
        $input     = $(v).find('input'),
        $next      = $(v).next(),
        $heading   = $(v).find('.step-heading'),
        error_html = "<div class='error'><i class='fa fa-exclamation-triangle'></i> Please make a selection before continuing</div>";

    $btn.click(function(e) {
        if ($input.is(':checked')) {
            $(v).slideUp('slow', function() {
                $next.slideDown('slow');
            });
        } else {
            $('div.error').remove();
            $heading.append(error_html);
        }
    });
});

answered Feb 6, 2016 at 14:30

Tomanow

7,3953 gold badges30 silver badges52 bronze badges

Collectives™ on Stack Overflow

combining jquery click functions

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related