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

【问题标题】：Assign an image to jQuery Object Data that can be filtered将图像分配给可以过滤的 jQuery 对象数据
【发布时间】：2014-05-27 22:57:22
【问题描述】：

我有一堆对应于不同啤酒类型的对象数据，用户可以调整 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/

【问题讨论】：

问题是什么？定义“对齐数据”，因为您有 5 个对象和 3 个滑块。什么形象？太多的未知数没有更好的解释。
抱歉含糊其辞。难以解释：当滑块点与分配给对象数据的点相关时，我希望显示图像。每个对象都有自己的图像。我没有在 jsFiddle 中提供图像，因为我不确定它在 html 中的位置。
您需要完全更新问题，详细说明您正在尝试做什么，包括将数据连接到显示的 html

标签： jquery object filter slider

【解决方案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

【讨论】：

太完美了！我如何将输出更改为图像而不是啤酒标题？
在每个啤酒的对象中定义该啤酒的图像 URL。然后将 output.append( k ) 改为 output.append( '' )
太棒了！再次感谢。最后一个问题;如果我想为图片旁边弹出的每种啤酒添加描述。这是否可以使用也分配给每个对象的跨度来完成？
是的，这样做是有意义的。
您能否以更新 jsFiddle 为例 - 一旦我这样做，它就会停止工作:(