Question

所以我正在开发一个PhoneGap应用程序，它基本上允许用户进行调查，然后记录输出。

调查的前几页每页有三个jQuery Mobile滑块。一旦他们开始调查，滑块应该反映并初始状态：滑块手柄应该位于滑块的中间，没有数据突出显示（蓝色进度条），并且滑块值的所有数字引用应该走了：

slider default

然后当我使用滑块时，数据高亮（蓝色进度条）应该出现以及数字参考：

slider changed value

所有这一切都很完美，但当我开始另一项调查时，应用程序仍处于打开状态或在后台运行时，滑块的某些元素无法正常重置。如下所示，滑块手柄恢复到中间，但数据突出显示不会消失，数字参考 - 至少在手柄上 - 保持旧值。在下图中，此时滑块的实际值设置为null - 您可以看到左侧的输入框为空白。

slider reset err

如何将这些滑块恢复为默认外观？

谢谢！

更新这是我关于滑块状态的代码。

CSS

.jquerymobileslidercont {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}
.jquerymobileslidercont label {
    font-weight: bold;
}
.jquerymobileslidercont .ui-slider-track {
    height: 32px;
    margin-top: -8px;
}
.jquerymobileslidercont .ui-slider-handle {
    height: 40px !important;
    width: 40px !important;
    margin-top: -20px !important;
    line-height: 40px;
}
.jquerymobileslidercont .ui-slider-handle .ui-btn-text {
    font-weight: bold;
    font-size: 18px;
}

.ui-header .ui-title{
    font-size: 20px;
}

.jquerymobileslidercont .ui-slider-handle .ui-btn-text{

    bottom: 17%;
}

JavaScript ...我在提交调查时调用resetSurveyWidgets ...这就是我尝试重置滑块外观的方法

$(document).on("pageinit",function(){

        $(".jquerymobileslider").on("change", function () {
            $(this).closest(".ui-slider").find("a .ui-btn-text").html($(this).val());
         }).on("keyup", function () {
                        $(this).closest(".ui-slider").find("a .ui-btn-text").html($(this).val());
            });

        $(".ui-slider-input").prop("readonly", true);


        if(!visitedSurvey1a){
            $("#survey1a .jquerymobileslidercont .ui-slider-handle").css("left", "50%");
        }

        if(!visitedSurvey1b){
            $("#survey1b .jquerymobileslidercont .ui-slider-handle").css("left", "50%");
        }

        if(!visitedSurvey1c){
            $("#survey1c .jquerymobileslidercont .ui-slider-handle").css("left", "50%");
        }
        ...

function resetSurveyWidgets(){
        console.log("Within resetSurveyWidgets()");

        visitedSurvey1a = false;
        visitedSurvey1b = false;
        visitedSurvey1c = false;

        $(".jquerymobileslider").val(null);//.slider("refresh");
        $(".jquerymobileslidercont .ui-slider-handle").css("left", "50%");
        ...

滑块元素的HTML

<h3>Think about how you feel right now:</h3>\
    <h2>Right now, I feel:</h2>\
    <div class="jqmslidercontsurvey1a">\
        <div data-role="fieldcontain" class="jquerymobileslidercont">\
            <label for="slider-happy" class="sliderlabel">Happy:</label>\
            <input type="range" name="slider-happy" id="slider-happy" value="" min="1" max="10" step="1" class="jquerymobileslider" data-highlight="true" data-show-value="true" data-popup-enabled="true">\
        </div>\
        \
         <div data-role="fieldcontain" class="jquerymobileslidercont">\
            <label for="slider-relax" class="sliderlabel">Relaxed:</label>\
            <input type="range" name="slider-relax" id="slider-relax" value="" min="1" max="10" step="1" class="jquerymobileslider" data-highlight="true" data-show-value="true" data-popup-enabled="true">\
        </div>\
        \
         <div data-role="fieldcontain" class="jquerymobileslidercont">\
            <label for="slider-cheer" class="sliderlabel">Cheerful:</label>\
            <input type="range" name="slider-cheer" id="slider-cheer" value="" min="1" max="10" step="1" class="jquerymobileslider" data-highlight="true" data-show-value="true" data-popup-enabled="true">\
        </div>\
    </div>

<h3>Think about how you feel right now:</h3>\
    <h2>Right now, I feel:</h2>\
    <div class="jqmslidercontsurvey1b">\
         <div data-role="fieldcontain" class="jquerymobileslidercont">\
            <label for="slider-sad" class="sliderlabel">Sad:</label>\
            <input type="range" name="slider-sad" id="slider-sad" value="" min="1" max="10" step="1" class="jquerymobileslider" data-highlight="true" data-show-value="true" data-popup-enabled="true">\
        </div>\
    \
         <div data-role="fieldcontain" class="jquerymobileslidercont">\
            <label for="slider-stress" class="sliderlabel">Stressed:</label>\
            <input type="range" name="slider-stress" id="slider-stress" value="" min="1" max="10" step="1" class="jquerymobileslider" data-highlight="true" data-show-value="true" data-popup-enabled="true">\
        </div>\
    \
         <div data-role="fieldcontain" class="jquerymobileslidercont">\
            <label for="slider-angry" class="sliderlabel">Angry:</label>\
            <input type="range" name="slider-angry" id="slider-angry" value="" min="1" max="10" step="1" class="jquerymobileslider" data-highlight="true" data-show-value="true" data-popup-enabled="true">\
        </div>\
    </div>
...

Answer 1

在resetSurveyWidgets（）函数中，尝试：

$(".jquerymobileslider").val(null).slider("refresh").val(null).change();
$(".jquerymobileslidercont .ui-slider-handle").css("left", "50%");

链式函数的工作原理如下：

.val(null)将输入值重置为null
.slider('refresh')摆脱蓝色突出显示但随后设置值为0（初始条件）
.val(null)再次将值重置为null
.change()强制更改事件代码以重置事件代码把文字处理成什么。

这允许您使用一个jQuery选择器。

Answer 2

尝试一下：

  $(".jquerymobileslider").val(null);
        $(".ui-slider-pop").html("");
    $(".ui-slider-handle").html("");
    $(".ui-slider-bg").css("width","0%");

这是随之而来的小提琴：

http://jsfiddle.net/r74kt/

某些jQuery Mobile滑块元素不会恢复为默认状态

2 个答案: