jQuery从匿名滑块获取滑块值

时间:2013-02-04 07:32:44

标签: jquery jquery-ui sliders

我正在寻求帮助:

http://jsfiddle.net/techii/9e2cJ/2/

这是this

的后续问题

但是因为这不是“来这里解决你的问题我们会为你做这个”网站我特别提出了一个特殊问题

在上面的jsfiddle我使用的是匿名滑块,对滑动/更改做出反应的功能应该是过滤/匹配从JSON解析的餐馆。我正试图从我的四个滑块中提取值,但它们必须与它们各自的变量匹配,例如ambienceSliderValue收集后我可以将它们与JSON对应物进行比较(ambienceRating)

var refreshRestaurant = 
    $(".restaurant > div").each(function(){
            // Some code to extract things like spicyness, expensiveness
            // this part should maybe be in the JSON object constructor above to push data? Perhaps I should use .val(); instead?
            var ambienceRating = $(this).data("ambienceRating");
            var spicyRating = $(this).data("spicyRating");
            var garlicRating = $(this).data("garlicRating");
            var expensiveRating = $(this).data("expensiveRating");

               // Also some code to get the slider values...


            var isMatch = ambienceSliderValue <= ambienceRating && spicySliderValue <= spicyRating && garlicSliderValue <= garlicRating && expensiveSliderValue <= expensiveRating;
            $(this).toggle(isMatch);
    })

我唯一的解决方案是使用命名滑块吗?

1 个答案:

答案 0 :(得分:1)

例如,我将从回调函数中显示变量更新:

HTML:

<div class="sliders">
    <div id='a'></div>
    <div id='b'></div>
    <div id='c'></div>
    <div id='d'></div>
</div>

JS:

$(function () {
  var vars={};
    $('.sliders div').slider({
        orientation: "horizontal",
        range: false,
        min: 0,
        max: 100,
        step: 1,
        value: 0,
        slide: refreshRestaurant,
        change: refreshRestaurant
    }); 

    function refreshRestaurant() {
     vars[this.id]=$(this).slider('value'); 
      console.log(vars);
    }
});

DeMO;