Question

示例：http://www.jpeg.cz/images/2016/05/05/yZHWJ.jpg

我有一个问题，如何在范围滑块的每一步显示和删除内容块

<div id="range-slider"></div>

<!-- jQuery ui slider -->
<!-- wrapper of content -->
<div class="item" id="item1">
    <!-- first block of content -->
    <div class="slider-content">
        <span>lorem ipsum:</span>
        <span class="price">30 000 KČ</span>
    </div>

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

    .......
</div>

$("#range-slider").slider({
        value: 3,
        min: 1,
        max: 5,
        step: 1,

        change: function (event, ui) {
});

Answer 1

首先使用css（slider-content）隐藏所有display:none;元素，然后

$("#range-slider").slider({
        value: 3,
        min: 1,
        max: 5,
        step: 1,

        change: function (event, ui) {
          $('#item1 .slider-content').each(functions(index, element){
            if(index == (ui.value - 1)){
              $(element).show();
            }
            else{
               $(element).hide();
            }
          });
});

Answer 2

最好为每个内容块添加映射ID。然后，您可以轻松地显示相关内容：

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

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

使用Javascript：

$("#range-slider").slider({
    value: 3,
    min: 1,
    max: 5,
    step: 1,

    change: function (event, ui) {
        $('.slider-content').hide();
        $('#slider_content_' + ui.value).show();
    });
});

如何在范围滑块的每一步显示内容？

2 个答案: