Javascript 滑块使用对象中的值作为条件语句中的条件，使图像可见

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

$(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");
            }
        }
    });
});

$（函数（）{
$（“#滑块范围”）。滑块({
范围：对，
最低:300,，
最高：3000，
值：[3003000]，
步骤：10，
幻灯片：功能（事件、用户界面）{
$（“#amount”）.val（“$”+ui.values[0]+“-$”+ui.values[1]）；
var handlevalues=（$（“#滑块范围”）.slider（'values'）；
var object0001={price:1300}
var object0002={price:1400}
var object0003={price:1240}
if（object0001.price>handlevalues[0]&&object0001.pricehandlevalues[0]&&object0002.pricehandlevalues[0]&&object0003.price

问题是：有100多个图像和相应的对象，添加所有这些图像和对象需要很长时间，这会使我的代码变得很长。除此之外，我将每天添加和删除图像。有没有办法把它缩短？ 这是我的想法，但我没有知识去做

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

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

使用给定代码的示例：jQuery扫描并发现

object0001.price=1300

。然后jquery查找id=dot0001的图像。如果

object0001.price=1300

在滑块图像的范围内，则

id=dot0001

变为可见，否则变为隐藏

谢谢你的帮助。如果有问题，我就在这里

$（函数（）{
$(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=[
object0001:{price:1300}，
object0002:{price:1400}，
object0003:{price:1240}
];
$（“#滑块范围”）。滑块({
范围：对，
最低:300,，
最高：3000，
值：[3003000]，
步骤：10，
幻灯片：功能（事件、用户界面）{
var priceMin、priceMax、objectName、objectStep、dotName、dotStep、visible；
$（“#amount”）.val（“$”+ui.values[0]+“-$”+ui.values[1]）；
var handlevalues=（$（“#滑块范围”）.slider（'values'）；
priceMin=handlevalues[0]；
priceMax=handlevalues[1]；
for（AllObject中的objectName）{
if（allObjects.hasOwnProperty（objectName））{
objectStep=allObjects[objectName]；
dotName=objectName.replace（“对象”、“点”）；
dotStep=$（“#”+dotName）；
可见=（objectStep.price>priceMin&&objectStep.price

---

这正好回答了您的问题，但要求您同时创建点对象和AllObject JSON对象。将对象的价格作为dot对象上的

数据价格

属性，而不是通过allObjects循环，而是通过

$（“[id^='dot']”）循环

以下是一个解决方案，您可以在html中将项目价格作为

数据-

属性插入，我假设是由服务器代码生成的

为了演示，我使用了一个

DIV

，其中price作为文本。项具有公共类名，不需要ID

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

---

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

如果您提供一些显示图像布局和属性的示例html，则可能会有更简单的解决方案，它们也有助于查看所有

对象

项是如何创建的。显示的格式对代码不太友好，添加了设置对象的部分。为什么不更新以前的一个相同问题（，），而是为相同的问题打开另一个问题？使用

$（“#滑块范围”）。滑块（'值'）

在幻灯片事件处理程序中，当值数组已作为

ui提供时。值

是的，在问题的代码示例中有许多低效的东西，其中最重要的一个问题是：避免列表中每个项目的冗余if/else。这就是为什么我使用完全不同的解决方案，OP知道需要一种更具可扩展性的方法

/* 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);
}

.item.hidden{
    visibility:hidden
}