How do I make this slider change to a custom slider number?

Question

I have this slider, I want to be able to click the slide number instead of "next" and "previous", then it go to that slide, currently there's functions that allow you to change to next/previous (this is not my code):

jQuery(".next").click(ms_go_next);

and

jQuery(".previous").click(function(){

Basically in the code getleads.js I've found a function in the code called "ms_go_slide", I take it this function will take a custom number and change it to that slide:

 function ms_go_slide(slide, direction) { if (animating) return false; animating = true; var fs = jQuery('fieldset').filter(':visible'); next_fs = jQuery('fieldset.section' + slide); ms_set_height(next_fs); //show the next fieldset next_fs.css({ 'left': ((direction == 'ltr') ? '-100%' : '100%'), 'top': 0 }); next_fs.show(); //hide the current fieldset with style current_fs.animate({ opacity: 0 }, { step: function(now, mx) { if (direction == 'ltr') { var a = (100 * now).toString() + '%'; var b = '-' + (100 * (1 - now)).toString() + '%'; current_fs.css({ 'left': b }); next_fs.css({ 'left': a }); } else { var a = '-' + (100 * now).toString() + '%'; var b = (100 * (1 - now)).toString() + '%'; current_fs.css({ 'left': b }); next_fs.css({ 'left': a }); } opacity = 1 - now; next_fs.css({ 'opacity': opacity }); }, duration: 800, complete: function() { current_fs.hide(); current_fs.attr('style', ''); current_fs = next_fs; console.log('setting:214', current_fs); current_fs.attr('style', ''); current_fs.show(); animating = false; } }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="msform" form action="https://loancalc.000webhostapp.com/wp-admin/admin-ajax.php" method="POST"> <!-- progressbar --> <ul id="progressbar"> <li class="active" style="width:33.333333333333%"></li> <li style="width:33.333333333333%"></li> <li style="width:33.333333333333%"></li> </ul> <!-- fieldsets --> <div class="fieldsets"> <fieldset class="section1"> <p class="inputfield ">How much money do you need?<br> <select class="minimal required" name="loanamount" required> <option value="Select...">Select...</option> <option value="under $5000">under $5000</option> <option value=" under $10000"> under $10000</option> <option value=" under $20000"> under $20000</option> <option value=" under $50000 "> under $50000 </option> <option value="under $100000">under $100000</option> <option value=" over $100000"> over $100000</option> </select> </p> <div class="buttons"> <input type="button" name="next" class="next action-button" value="Next" /> </div> <div class="buttons_working"> <p class="working_loading"></p> </div> </fieldset> <fieldset class="section2"> <p class="inputfield ">What's your monthly revenue?<br> <select class="minimal required" name="yourincome" required> <option value="Select...">Select...</option> <option value="under $5000">under $5000</option> <option value=" under $10000"> under $10000</option> <option value=" under $20000"> under $20000</option> <option value=" under $50000 "> under $50000 </option> <option value="under $100000">under $100000</option> <option value=" over $100000"> over $100000</option> </select> </p> <div class="buttons"> <input type="button" name="previous" class="previous action-button" value="Previous" /> <input type="button" name="next" class="next action-button" value="Next" /></div> <div class="buttons_working"> <p class="working_loading"></p> </div> </fieldset> <fieldset class="section3"> <p class="inputfield ">Your name<br> <input id="yourname" name="yourname" type="text" class="required" value="" /></p> <p class="inputfield ">Email address<br> <input id="youremail" name="youremail" type="text" class="required" value="" /></p> <p class="inputfield ">Phone number<br> <input id="yourphone" type="tel" name="yourphone" value="" placeholder="0123-456789" /> <script type="text/javascript"> jQuery(document).ready(function() { jQuery("input[name=\\"yourphone\\"]").mask("0000-000000"); }); </script> </p> <p class="inputfield ">Business name<br> <input id="businessname" name="businessname" type="text" value="" /></p> <div class="buttons"><input type="button" name="previous" class="previous action-button" value="Previous" /> <input type="submit" name="submit" id="ms_submit" class="submit action-button" value="Submit" /></div> <div class="buttons_working"> <p class="working_loading"></p> </div> </fieldset> <fieldset class="section_success"> <h2 class="section_success_title">Success</h2> <p class="section_success_blurb">You successfully submitted the form</p> </fieldset> <fieldset class="section_failure"> <h2>Oops</h2> <p>The form didn't submit</p> </fieldset> <fieldset class="section_loading"> <p class="loading"></p> </fieldset> </div> </form>

I added this bit of code:

jQuery('input').click(ms_go_slide(this.slide));

But it doesn't work.

Answer 1

What happens if you try jQuery('input').click(() => { ms_go_slide(this.slide) }) ?

As soon as you run ms_go_slide, it will execute. With your current code, it will run once right when the program begins and then never again.

Instead, we create a new function inside the .click() handler and that function runs on click. I'm using arrow notation here to create the function because it prevents this from acting all funky.