Search code examples
jqueryjquery-uisliders

jQuery getting slider value from anonymous slider


I'm looking for help with this:

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

and this is a follow-up question to this

But because this isn't a "come here with your problem and we will do it for you" site I have one spesific question in particular

In the jsfiddle above I'm using anonymous sliders and the function reacting to slide/change is supposed to filter/match restaurants parsed from JSON. I'm trying to extract values from my four sliders, but they have to be matched to their respective vars e.g. ambienceSliderValue when collected so I can compare them to their JSON counterparts (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);
    })

Is my only solution to use named sliders?


Solution

  • For example I'll show variables update from callback function:

    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;