Javascript 如何将此滑块更改为自定义幻灯片编号？_Javascript

Javascript 如何将此滑块更改为自定义幻灯片编号？

javascript

Javascript 如何将此滑块更改为自定义幻灯片编号？,javascript,Javascript,我有这个滑块，我希望能够单击幻灯片编号，而不是“下一页”和“上一页”，然后转到该幻灯片，目前有一些功能允许您更改为下一页/上一页（这不是我的代码）：及我在代码中找到了一个名为“ms_go_slide”的函数，我认为该函数将获取一个自定义编号并将其更改为该幻灯片： `function ms_go_slide(slide,direction) { if(animating) return false; animating = true; var fs = jQuery('fieldset')

我有这个滑块，我希望能够单击幻灯片编号，而不是“下一页”和“上一页”，然后转到该幻灯片，目前有一些功能允许您更改为下一页/上一页（这不是我的代码）：

及

我在代码中找到了一个名为“ms_go_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;
    }
});

HTML在这里

<html>
 <head></head>
 <body>
  <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" style="height: 161px;">
    <fieldset class="section1" style="display: block;">
     <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" maxlength="11" /><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>
 </body>
</html>

但它不起作用，不能做像这样简单的事情让我想放弃编码，我只是觉得我真的做不到，我希望它只是点击并得到答案，但它没有。我需要建议

滑块是

这张幻灯片是指什么？你从哪里得到这个号码？另外，您应该使用匿名函数作为回调函数，即

jQuery（'input'）。单击（函数）（{ms_go_slide（）；}）我添加它的想法是，它将引用单击的任何幻灯片编号，顶部的数字显示当前幻灯片的内容。请创建一个：很难看到您正在尝试做什么。您没有包含重现问题所需的最小标记和代码。我在这个插件文件夹中没有任何html，它都是php和js，所以不确定您将如何重现它。我不确定我可以向您展示什么代码，我甚至不知道我自己应该包括其中的哪一部分。您不需要共享PHP：这纯粹是一个客户端问题，所以您只需要使用服务器的输出HTML创建一个MCVE。我们在这里不是透视者，所以我们不可能通过心灵感应找出哪里出了问题，而不需要最少的代码来重现问题。
`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;
    }
});

<html>
 <head></head>
 <body>
  <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" style="height: 161px;">
    <fieldset class="section1" style="display: block;">
     <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" maxlength="11" /><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>
 </body>
</html>

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