区分jQuery移动滑块的初始状态和使用状态
我的雇主希望我改变滑块在我的应用程序中的实现方式。他们想让我区分一个已经交互过的滑块和一个没有使用过的滑块。
如果没有使用滑块，则滑块手柄将出现在滑块的中间，没有显示蓝色进度条。此外，所有数字滑块值都不会出现(无论是在滑块手柄上，还是在滑块左边的输入框上)。
如果使用了滑块，则会出现蓝色进度条，以及数值(在输入框和滑块手柄上)。
然后，如果用户试图在没有使用所有滑块的情况下进入下一个调查页面，他们将无法访问。
电流滑块：
这些滑块中的每一个都属于一个自定义类#jquerymobileslider。是否可以仅将此功能应用于该类的滑块？
更新:我已经实现了我在下面标记为答案的帖子中的更改，但是现在出现了滑块不能正确更新的问题。
当我更改页面时，每个滑块的手柄返回到默认位置--
left: 50%;然而，进度条和数值都停留在修改后的值：
也许这是一个需要刷新jquerymobileslidercont元素的问题吗？
更新更新：
我已经纠正了上述问题，使用条件为每个调查滑块页和滑块手柄的位置现在是正确的，而用户采取调查。但是，现在当用户提交调查并进行新的调查时，滑块小部件不能正确地恢复到默认状态(没有可见的进度条，滑块没有值，滑块内的任何元素都没有显示值)。
相反，我看到的是：
下面是我尝试使用的代码，用于将滑块元素重置为默认的，但是数字句柄标签不会更新，进度条也不会更新。但是，可以看到滑块的输入框反映了对滑块值的更改：
function resetSurveyWidgets(){
visitedSurvey1a = false;
visitedSurvey1b = false;
visitedSurvey1c = false;
$(".jquerymobileslider").val(null);//.slider("refresh");
$(".jquerymobileslidercont .ui-slider-handle").css("left", "50%");
...
}我的感觉是，包括作为解决方案提供的原始代码，在开始时：
$(document).on("pageinit","#survey1a", 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());
});
$("#survey1a .jquerymobileslidercont .ui-slider-handle").css("left", "50%");
...
}可能会解决这个问题，但我的页面结构来自PhoneGap命令行工具生成的项目模板，我不想偏离它创建的内容。
我的网页的结构是..。
$(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());
});
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%");
}
$("#survey1a").on("pagecreate", function(){
var html = Mustache.to_html(survey1atemplate, survey1adata);
$("#survey1acontent").html(html);
});
$("#survey1b").on("pagecreate", function(){
var html = Mustache.to_html(survey1btemplate, survey1bdata);
$("#survey1bcontent").html(html);
});
$("#survey1c").on("pagecreate", function(){
var html = Mustache.to_html(survey1ctemplate, survey1cdata);
$("#survey1ccontent").html(html);
});
...因此，我不对每个调查页调用.on(页面)，而是对每个调查页面调用.on(页面)，在单个通用.on(页面)中调用。
我尝试将滑块句柄css左: 50%规则中每个$selector.on(“页面”，函数()，但滑块总是加载在最左边。
回答 1
Stack Overflow用户
发布于 2014-02-09 21:40:25
这是一个工作的演示
将类放在滑块上没有帮助，因为跟踪标记不包含在该类中。为此，我在每个滑块/标签周围添加了一个容器div，其中包含一个jquerymobileslidercont类(如果您愿意的话，可以在几个滑块周围使用一个容器)。
<div class="jquerymobileslidercont">
<label for="slider-1">Frustrated:</label>
<input class="jquerymobileslider" data-highlight="true" type="range" name="slider-1" id="slider-1" min="0" max="10" value="" />
</div>要显示蓝色进度条，在输入上设置data-highlight="true"，若要启动空，请设置value=""。
用于设置更大的跟踪和处理的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;
}最后，在javascript中，我们通过左css将句柄初始化到中间点，然后处理更改事件和keyup事件，以在句柄内设置文本：
$(document).on("pageinit", "#page1", function () {
$(".jquerymobileslidercont .ui-slider-handle").css("left", "50%");
$(".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());
});
});UPDATE:如果代码不在pageinit中，并且可能运行不止一次，那么您希望确保只有当输入没有值时才会将句柄移动到50%：
$( ".jquerymobileslidercont .ui-slider-handle" ).each(function( index ) {
if ($(this).parents(".ui-slider").find("input").val() == '' ){
$(this).css("left", "50%");
}
}); 下面是更新的演示
https://stackoverflow.com/questions/21664660
复制相似问题
腾讯云开发者
