javascript - jquery slider 不显示

Question

我有一个 jQuery slider ，我正在尝试将其实现到我的 WordPress 网站中。

HTML

<h2 class="pov-header price-range-trigger">Price Range</h2>
<div id="price-range-container" style="display:none;">
   <div id="slider-range" style="font-size: 90%; margin-top: 5em;"></div>
   <div id="slider-value-min" style="margin-top: 1.5em;float:left"></div>
   <div id="slider-value-max" style="margin-top: 1.5em;float:right"></div>
</div>

JS

$(function() {
  $( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 500000,
    step: 10000,
    values: [ 0, 500000 ],
    slide: function( event, ui ) {
      $( "#slider-range" ).val( "R" + ui.values[ 0 ] + " - R" + ui.values[ 1 ] );
      $( "#slider-value > #slider-value-min" ).html( ui.values[0] );
      $( "#slider-value > #slider-value-max" ).html( ui.values[1] );
      var minRange = $( "#slider-value > #slider-value-min" ).html();
      var maxRange = $( "#slider-value > #slider-value-max" ).html();

    },
    change: function( event, ui ) {
          $( "#slider-range" ).val( "R" + ui.values[ 0 ] + " - R" + ui.values[ 1 ] );
        }
  });

$( "#slider-range" ).val( "R" + $( "#slider-range" ).slider( "values", 0 ) +
  " - R" + $( "#slider-range" ).slider( "values", 1 ) );
});

我的问题是，这在它应该在的区域没有显示任何内容，我对 jquery 非常陌生，并且大部分时间都在做这方面的教程，看起来我错过了一些东西。

有人知道我哪里可能出错吗？

Answer 1

您看不到 slider ，因为您的容器中有 display:none:

<div id="price-range-container" style="display:none;">

更改为

<div id="price-range-container">

检查这个jsFiddle:http://jsfiddle.net/xBB5x/9942/