0

我希望我的 jQuery 滑块在用户移动滑块时动态更新其上方的数字。现在，上面的数字仅在滑块完成移动时才会改变。

这是我的代码：

HTML >

        <div class="row">
            <div class="large-6 columns">
                <div id="amount-money" class="slider-text left">$120000</div>
                <div id="amount-money-2" class="slider-text right">$10000000</div>
            </div>
            <div class="large-6 columns">
                <div id="amount-bath" class="slider-text left">1 Bathroom</div>
                <div id="amount-bath-2" class="slider-text right">4 Bathroom</div>
            </div>
        </div>
        <div class="row">
            <div class="large-6 columns">
                <div class="slider-wrapper">
                    <div class="slider costSlider"></div>
                </div>
            </div>
            <div class="large-6 columns">
                <div class="slider-wrapper">
                    <div class="slider bathSlider"></div>
                </div>
            </div>
        </div>

Javascript >

  // creating sliders for search
  $( ".costSlider" ).slider({
    range: true,
    min: 120000,
    max: 10000000,
    values: [ 120000, 10000000 ],
  });
  $( ".bathSlider" ).slider({
    range: true,
    min: 0,
    max: 5,
    values: [ 1, 4 ],
  });

  $( ".costSlider" ).on( "slidechange", function( event, ui ){
    console.log(ui.values);
    $( "#amount-money" ).replaceWith('<div id="amount-money" class="slider-text left"> $' + ui.values[0]);
    $( "#amount-money-2" ).replaceWith('<div id="amount-money-2" class="slider-text right"> $' + ui.values[1]);
  });
  $( ".bathSlider" ).on( "slidechange", function( event, ui ){
    $( "#amount-bath" ).replaceWith('<div id="amount-bath" class="slider-text left">' + ui.values[0] + ' Bathroom');
    $( "#amount-bath-2" ).replaceWith('<div id="amount-bath-2" class="slider-text right"> ' + ui.values[1] + ' Bathroom');
  });
4

1 回答 1

1

你应该能够驾驭这个slide事件。

$( ".costSlider" ).on( "slide", function( event, ui ) {} );

这是（强调我的）...

在 slide 期间的每次鼠标移动时触发。事件中提供的值 asui.value表示作为当前移动结果的句柄将具有的值。取消事件将阻止句柄移动，并且句柄将继续具有其先前的值。

于 2013-09-04T16:53:06.750 回答