javascript - combining jquery click functions -
i quite new jquery , wondering if recommend ways combine these functions code more efficient , slimmed down. have 2 click functions exact same thing targeting 2 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 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 selection before continuing</div>"); } // end else })// end click function
you can access dom element tha trigger event using $(this)
inside vent handler.
so, have attach same handler several elements, , use $(this)
inside implementation of handler.
$(".step1 button").add(".step2 button").click(function() { // $(this) refered button tha triggered event }
to make easier find step number can use custom "data-" attribute, example this:
<button data-step-no="1">
you can attribute using $(this).attr('data-step-no')
, in fact, add or substract, need parse this: var stepno = parseint($(this).attr('data-step-no')
.
to select buttons wit single selector can use buttons this:
<button data-step-no="1" class="step"> <button data-step-no="2" class="step">
ans select them in single step:
$('button .step').click(...
Comments
Post a Comment