Question

我有一堆对应于不同啤酒类型的对象数据，有3个用户可以调整的滑块，如果这些滑块与对象数据对齐，我希望该图像显示在下面的div中。

    <label for="slider-step">Colour:</label>
    <input type="range" name="slider-step" id="slider-step" value="20" min="0" max="40" step="10" />

    <label for="slider-step">IBU:</label>
    <input type="range" name="slider-step" id="slider-step" value="60" min="50" max="70" step="5" />

    <label for="slider-step">ABV:</label>
    <input type="range" name="slider-step" id="slider-step" value="6" min="2" max="10" step="2" />


    <div class="showImage">
        Image Appears Here
    </div>

这是一个包含变量数据的jsFiddle：http://jsfiddle.net/54AqX/

Answer 1

第一步是创建一个对象，通过它可以在每次滑块更改时进行迭代。但是，任何啤酒都必须落入你设定的范围内;因为我必须将IBU最低值从50降低到30。

以下代码应对每次更改进行检测：

$(function() {
    $('input').on('input',function() {
        var output = $('div.showImage');
        output.empty();
        var color = $('#color').val(),
            ibu = $('#ibu').val(),
            abv = $('#abv').val();
        console.log(color,ibu,abv);
        $.each(beer, function(k,v) {
            !(v.color[0] <= color && color <= v.color[1]) ||
            !(v.ibu[0] <= ibu && ibu <= v.ibu[1]) ||
            !(v.abv[0] <= abv && abv <= v.ibu[1]) ||
            output.append( k );
        });
    });
});

以下演示显示了我为创建对象所做的更改：

JS FIDDLE DEMO

将图像分配给可以过滤的jQuery对象数据

1 个答案: