如何使用 jQuery UI Slider 显示内容？

【问题标题】：How to show content with jQuery UI Slider?如何使用 jQuery UI Slider 显示内容？
【发布时间】：2016-05-05 11:33:28
【问题描述】：

示例：

关于如何在每一步使用 jQuery UI Slider 显示内容并删除之前的内容，我遇到了问题。

                      <div id="range-slider"></div> <!-- ui jquery range slider-->

                        <!-- block of content -->
                        <div class="items">

                            <!-- first-block -->
                            <div class="slider-content">
                                <span>lorem ipsum:</span>
                                <span class="price">30 000</span>
                            </div>

                            <!-- second-block -->
                            <div class="slider-content">
                                <span>lorem ipsum:</span>
                                <span class="price">30 000</span>
                            </div>

                        </div>

 $("#range-slider").slider({
        max: 20,
        min: 4,
        step: 4,
        change: function (event, ui) {

        }
    });

【问题讨论】：

你能用你的 css 创建一个小提琴吗？
您可以在change 事件中使用ui.value。参考这个小提琴 - jsfiddle.net/Bhumika107/9Lttr6ro

标签： jquery html jquery-ui jquery-ui-slider

【解决方案1】：

在您的 change 函数中，遵循此代码

$('.items div').removeClass('active');
$('.items div:nth-child(' + ui.value / $(this).slider("option", "step") + ')').addClass('active');

并添加slide回调

slide: function(event, ui) {
    $('.items div').removeClass('active');
    $('.items div:nth-child(' + ui.value / $(this).slider("option", "step") + ')').addClass('active');  
}

这是fiddle

风格#range-slider、ui-slider-range、ui-slider-handle、ui-state-active、ui-state-hover

【讨论】：