Question

尝试为输入创建一个简单的滑块。

使用可添加额外字段的调查gem。我在问题中添加了一个名为“jSlider”的类，并显示滑块，但不更新输入。

生成的html表单：

<fieldset class="q_default jSlider" id="q_353" name="17) On a scale of 0 to 10, ...">
  <legend><span>17) On a scale of 0 to 10, ...</span></legend>
  <ol><span class='help'></span>
    <input id="r_18_question_id" name="r[18][question_id]" type="hidden" value="353" />
    <input class="" id="r_18_answer_id" name="r[18][answer_id]" type="hidden" value="3840" />
    <li class="string optional" id="r_18_string_value_input"><input id="r_18_string_value" maxlength="255" name="r[18][string_value]" type="text" /></li>
  </ol>
</fieldset>

我的js是：

$(".jSlider").each(function(){
    var newSlider = '<div style="margin-top:20px;margin-bottom:20px;" id="slider">0</div><br />';
    $(this).append(newSlider);
    $("#slider", this).slider({
        value:0,
        min: 0,
        max: 10,
        step: 1,
        slide: function( event, ui ) {
            alert(ui.value);
            // when append, it adds to the fieldset
            // first parent is the fieldset, next should be the ol, then the li 
            //       finally arriving at the input field
            $(this).parent().next("ol").next("li").next("input:text").val(ui.value);

                    }

    });

   });

修改

建议编辑以再次修复重复的ID中断。

$(".jSlider").each(function(){
    var id = $(this).attr("id");
    var sliderID = id + "_slider";  
    alert(sliderID);
    var newSlider = '<div id="' + sliderID + '"></div><br />';
    $(this).append(newSlider);
    // or even
    // $(sliderID).slider({
    $(sliderID, this).slider({
        value:0,
        min: 0,
        max: 10,
        step: 1,
        change: function( event, ui ) {
               // alert(ui.value);
                // when append, it adds to the fieldset
                // first parent is the fieldset, next should be the ol, then the li 
                //       finally arriving at the input field
                $(this).closest('fieldset').find('input:text').val(ui.value);

                        }

    });

   });

Answer 1

您可以这样做（您应该使用停止事件或更改事件）：

    stop: function( event, ui ) {
        alert(ui.value);
        // when append, it adds to the fieldset
        // first parent is the fieldset, next should be the ol, then the li 
        //       finally arriving at the input field
        $(this).closest('fieldset').find('input:text').val(ui.value);

                }

Answer 2

更新字段：

$('input#myfield').val($('#slider').slider("option", "value"));

该脚本生成重复的ID（每个循环中的新ID #slider）。使用$（this）可以防止脚本行为不当：

$('.jSlider').each(function(){
    $(this).slider({..});
};

编辑28.7：使用var $ newSlider扩展var newSlider所以可以使用函数$ .slider（）：

$(".jSlider").each(function(){
   var $newSlider = $('<div id="' + $(this).attr("id") + '">');
   $(this).append($newSlider);
   $newSlider.slider(options);});

$。append（）接受HTML元素的定义，不需要结束标记。

jquery 0 - 10形式问题的滑块

修改

2 个答案: