CODEWITHSUNDEEP
jqueryjquery-ui
Ante
Ante

Reputation: 8637

jquery select problem

In code below is function that converts slider class into slider control. It has function which is executed when "slide" event is raised.

  $(function(){
                $(".slider").slider({
                    value: 0,
                    min: 0,
                    max: 5,
                    step: 1,
                    slide: function(event, ui) {
                        $(".slideinput > input.slidevalue").val(ui.value);
                    }
                });
            });

This code is not working when I have multiple sliders on one page. (it is changing all of them) How can I fix it? I don't know how to set second element select statetment to select just element with unique id. (id is dynamically generated)

Some HTML to ilustrate positioning of the elements.

<div class="item"> 
            <p class="head"> 
                A kako biste općenito ocijenili sljedeće aspekte ljetne turističke ponude u Hrvatskoj: Kvaliteta smještaja?</p> 

            <div class="slideinput" style="width: 220px; height: 20px; padding-top: 10px; padding-left: 8px;"> 
                <div style="width: 200px;" class="slider"> 
                </div> 
                <input class="slidevalue" id="q34" name="q34" type="hidden" value="0" /> 
            </div> 

        </div> 

        <div class="item"> 
            <p class="head"> 
                Broj plaža?</p> 

            <div class="slideinput" style="width: 220px; height: 20px; padding-top: 10px; padding-left: 8px;"> 
                <div style="width: 200px;" class="slider"> 
                </div> 
                <input class="slidevalue" id="q35" name="q35" type="hidden" value="0" /> 
            </div> 

        </div> 

        <div class="item"> 
            <p class="head"> 
                Urednost plaža?</p> 

            <div class="slideinput" style="width: 220px; height: 20px; padding-top: 10px; padding-left: 8px;"> 
                <div style="width: 200px;" class="slider"> 
                </div> 
                <input class="slidevalue" id="q36" name="q36" type="hidden" value="0" /> 
            </div> 

        </div> 

        <div class="item"> 
            <p class="head"> 
                Kvaliteta restorana i kafića?</p> 

            <div class="slideinput" style="width: 220px; height: 20px; padding-top: 10px; padding-left: 8px;"> 
                <div style="width: 200px;" class="slider"> 
                </div> 
                <input class="slidevalue" id="q37" name="q37" type="hidden" value="0" /> 
            </div> 

        </div>

Any solution?

Upvotes: 0

Views: 152

Answers (1)

gnarf
gnarf

Reputation: 106412

I'm not sure about the "slide" event - but most jQuery events will have this set as the target element.

Have you tried doing a console.log(this); (assuming firebug) to see what you have?

You might be able to do this:

Updated with comment:

It seems that your input element is a child of the "sliders" parent, not the slider, changed the code block to reflect yours.

slide: function(event, ui) {
  $(this).parent().find("input.slidevalue").val(ui.value);
}

Upvotes: 3

Related Questions