0

我在网站上有一个滑块，通过滑动它，图像消失并出现。这是通过条件语句完成的。

$(function () {
    $("#slider-range").slider({
        range: true,
        min: 300,
        max: 3000,
        values: [300, 3000],
        step: 10,
        slide: function (event, ui) {
            $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
            var handlevalues = ($("#slider-range").slider('values'));
            var object0001={price:1300}
            var object0002={price:1400}
            var object0003={price:1240}
            if (object0001.price > handlevalues[0] && object0001.price < handlevalues[1]) {
                $("#dot0001").css("visibility", "visible");
            } else {
                $("#dot0001").css("visibility", "hidden");
            }
            if (object0002.price > handlevalues[0] && object0002.price < handlevalues[1]) {
                $("#dot0002").css("visibility", "visible");
            } else {
                $("#dot0002").css("visibility", "hidden");
            }
            if (object0003.price > handlevalues[0] && object0003.price < handlevalues[1]) {
                $("#dot0003").css("visibility", "visible");
            } else {
                $("#dot0003").css("visibility", "hidden");
            }
        }
    });
});

问题是：有超过 100 个图像和相应的对象，添加所有这些需要很长时间，并且会使我的代码变得很长。最重要的是，我将每天添加和删除图像。有没有办法让它更短？这是我想到的，但我没有这样做的知识。

我希望 jQuery 识别名称以“object”开头的所有对象，并且属性“price”的值在滑块的范围内。为了使这更容易，我们说这是 set1。

然后我希望 jQuery 找到所有以“点”开头的 id，并以与集合 1 中的对象相同的 4 位数字结束，并使它们可见，并且所有其他以“点”开头的 id 的图像不可见.

使用给定代码的示例：jQuery 扫描并发现object0001.price= 1300. 然后 jquery 查找具有id=dot0001. 如果object0001.price=1300在滑块图像的范围内，则id=dot0001变为可见，如果不在，则变为隐藏。

任何帮助表示赞赏。如果有问题，我就在这里。

4

2 回答 2

2

以下是一个解决方案，您可以在 html 中插入商品价格作为data-属性，我假设由服务器代码生成。

出于演示目的，我使用了DIV带有价格的文本。项目有一个共同的类名，不需要 ID。

<div class="item" data-price="320">320</div>

幻灯片代码仍然可以使用一些优化，但直到确定这是模块需要在这里工作的方式是演示代码：

/* cache items */
var $items=$('.item'), $max=$('#max'), $min=$('#min');

$("#slider").slider({
        range: true,
        min: 300,
        max: 800,
        values: [300,800],
        step: 10,
        slide: function (event, ui) {
            var min=ui.values[0],max=ui.values[1];
            /* show slider values in min/max spans*/
            updateDisplayValues( max,min);  
            /* changing class more efficient than inline css*/          
            $items.removeClass('hidden').filter(function(){
                var price= $(this).data('price');  
                /* filter items that fall outside of range*/              
                return price < min || price> max;
            }).addClass('hidden');
        }
});

function updateDisplayValues( max,min){
    $max.text('Max: '+ max);
    $min.text('Min: '+ min);
}

CSS：

.item.hidden{
    visibility:hidden
}

JSFIDDLE 演示

如果需要，还有其他几种简单的方法可以将数据放入页面，例如将所有数据加载到 JSON 数组中

于 2013-01-20T05:56:39.097 回答
0 
$(function () {
    var allObjects = [
        object0001:{price:1300},
        object0002:{price:1400},
        object0003:{price:1240}
    ];
    $("#slider-range").slider({
        range: true,
        min: 300,
        max: 3000,
        values: [300, 3000],
        step: 10,
        slide: function (event, ui) {
            var priceMin, priceMax, objectName, objectStep, dotName, dotStep, visible;
            $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
            var handlevalues = ($("#slider-range").slider('values'));
            priceMin = handlevalues[0];
            priceMax = handlevalues[1];
            for ( objectName in allObjects ) {
                if ( allObjects.hasOwnProperty(objectName) ) {
                    objectStep = allObjects[objectName];
                    dotName = objectName.replace("object","dot");
                    dotStep = $("#"+dotName);
                    visible = (objectStep.price > priceMin && objectStep.price < priceMax);
                    dotStep.toggle(visible);
                }
            }
        }
    });
});

这准确地回答了您的问题，但需要您同时制作点对象和 allObjects JSON 对象。将对象的价格作为data-price属性放在点对象上会更简洁，而不是循环遍历所有对象，而是循环遍历$("[id^='dot']")

于 2013-01-20T05:16:43.813 回答