Question

在下面的代码中是将滑块类转换为滑块控件的功能。它具有在“slide”事件被引发时执行的功能。

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

当我在一个页面上有多个滑块时，此代码无效。（它正在改变所有这些）我该如何解决？我不知道如何设置第二个元素select statetment来选择只有唯一id的元素。（id是动态生成的）

一些HTML用于说明元素的定位。

<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>

任何解决方案？

Answer 1

我不确定“幻灯片”事件 - 但大多数jQuery事件都会将this设置为目标元素。

你有没有试过console.log(this);（假设是萤火虫）来看你有什么？

您可以这样做：

更新了评论：

您的输入元素似乎是“滑块”父级的子级，而不是滑块，更改了代码块以反映您的。

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

jquery选择问题

1 个答案: