为什么滑块手柄无法移动？

Question

我正在尝试测试滑块，但滑块手柄无法移动。你能帮我这个吗？我附上Fiddle作为参考。

我的JS：

var current_plan = {};
var plans = [
  {
    'name' : 'Business',
    'ram' : '1024 MB',
    'disk' : '25 GB',
    'bandwidth' : 'Unlimited',
    'cores' : 4,
    'price' : {
      'uk' : 7.5,
      'us' : 12
    },
    'comment' : 'Ideal for simple websites, secondary nameservers & small test environments.'
  },
  {
    'name' : 'Power',
    'ram' : '2048 MB',
    'disk' : '50 GB',
    'bandwidth' : 'Unlimited',
    'cores' : 4,
    'price' : {
      'uk' : 15,
      'us' : 24
    },
    'comment' : 'Ideal for wordpress, drupal & other CMS, forums and medium sized web shops.'
  },
  {
    'name' : 'High-Traffic',
    'ram' : '4096 MB',
    'disk' : '100 GB',
    'bandwidth' : 'Unlimited',
    'cores' : 4,
    'price' : {
      'uk' : 30,
      'us' : 48
    },
    'comment' : 'Ideal for cPanel and other hosting controlpanels as well as busy sites and forums.'
  },
  {
    'name' : 'Power',
    'ram' : '8192 MB',
    'disk' : '200 GB',
    'bandwidth' : 'Unlimited',
    'cores' : 4,
    'price' : {
      'uk' : 60,
      'us' : 96
    },
    'comment' : 'Ideal for complex web apps, multiple busy sites, forums or web shops.'
  },
  {
    'name' : 'High-Traffic',
    'ram' : '16384 MB',
    'disk' : '400 GB',
    'bandwidth' : 'Unlimited',
    'cores' : 4,
    'price' : {
      'uk' : 120,
      'us' : 192
    },
    'comment' : 'Ideal for complex web apps, multiple busy sites, forums or web shops.'
  }
];
function calc_price() {
    var os_price = {
    'uk': {
        os: {
            windows: 5,
            cpanel: 7.5,
            ubuntu: 0,
            centos: 0
            },
        },
    'us': {
        os: {
            windows: 7.5,
            cpanel: 10,
            ubuntu: 0,
            centos: 0
            },
        }
    };

    var total_price = current_plan.price[country_code] + os_price[country_code].os[$("input[name=os_template]:checked").val()];
    $('.price-val').text(total_price.toFixed(2));
    var signUpUrl = ["https://control.vps.net/cart/ssd-vps"];
    signUpUrl.push(parseInt(current_plan.ram, 10));
    signUpUrl.push($("input[name=locations_template]:checked").val());
    signUpUrl.push($("input[name=os_template]:checked").val());
    signUpUrl.push("ssdvps-" + Math.floor(Math.random()*(99999-10000+1)+10000) + ".vps.net");
    $('#signup-button').attr('href', signUpUrl.join("/")+"/");
};

$(document).ready(function(){
  selected_signup_slices = parseInt($('input[name=preselected-package]').val(), 10);
  assigned_signup_slices = selected_signup_slices > 0 ? selected_signup_slices : 1;
  $('input[name=preselected-package]').val(assigned_signup_slices);
  var hslide_handle = function(e,ui){
      var x = ui.value;
      jQuery(this).find('input').val(x);
      current_plan = plans[x-1];

      $('.ram-field').text(current_plan.ram);
      $('.disk-field').text(current_plan.disk);
      $('.traffic-field').text(current_plan.bandwidth);
      $('.cores-field').text(current_plan.cores);
      $('.type-field').text(current_plan.name);
      $('.os-field').text(current_plan.os);
      $('.node-comment').text(current_plan.comment);

      $('.jsSliderNav span').removeClass('active');
      $('.jsSliderNav span:eq('+(x-1)+')').addClass('active');


      //$('#signup-button2').attr('href',"https://control.uat.vps.net/cloud-hosting-signup/"+current_plan.name.toLowerCase());

     //$('.price-val').text(total_price.toFixed(2));
        calc_price();
     //$('.price-val').text(current_plan.price[country_code].toFixed(2));
    };

  var hostapps_slider = $('#cloud-apps-slider').slider({
    min: 1,
    max: 5,
    animate: true,
    range: "min",
    slide: hslide_handle,
    change: hslide_handle
  });
  hostapps_slider.slider('value',assigned_signup_slices);
  $('.jsSliderNav span').click(function(){
    hostapps_slider.slider('value',$(this).index()+1);
  });
   $('.currency').html(currency_code);
    $("input[name=os_template]").on("change", calc_price);
    $("input[name=locations_template]").on("change", calc_price);
    calc_price();
});

我的HTML：

<div class="slider-nav-box ssdbox">
                    <div id="controls" class="controls">
                        <ul>
                            <li>
                                <div id="cpu" class="sliderssd">
                                    <div class="sliderbackdrop"></div>
                                    <div id="cloud-apps-slider" class="slider-nav-current"></div>
                                </div>                                        
                                <div class="slider-nav-links">
                                    <div class="slider-links-in clearfix links-type3 jsSliderNav">
                                        <span>VPS1GB</span>
                                        <span id="slider-links2">VPS2GB</span>
                                        <span>VPS4GB</span>
                                        <span id="slider-links3">VPS8GB</span>
                                        <span>VPS16GB</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div><!-- /.slider-nav-box -->
                <div class="col-md-12 parameter">
                    <div class="slider-parameter slider-parameter-t5 clearfix jsSliderParameter">
                        <div class="slider-parameter-item">
                            <strong>RAM: </strong><span class="ram-field">2 GB</span>
                        </div>
                        <div class="slider-parameter-item">
                            <strong>DISK SPACE: </strong><span class="disk-field">50 GB</span></div>
                        <div class="slider-parameter-item">
                            <strong>BANDWIDTH: </strong><span class="traffic-field">Unlimited</span>
                        </div>
                        <div class="slider-parameter-item">
                            <strong>CORES: </strong><span class="cores-field">4</span>
                        </div>
                    </div>

非常感谢！

Answer 1

Abdel是正确的，您的原始代码会抛出错误。您可以通过在浏览器中打开javascript控制台来访问错误（对于Chrome，它在选项 - ＆gt;更多工具 - ＆gt; javascript控制台）。如果您通过在第84行插入var country_code = 'uk';来定义country_code，则滑块可以正常工作。