很难将页面上所有五个jQuery UI滑块的值读入var中。
我需要一些帮助使此代码正常工作。所需的结果是“提交”按钮读取所有当前滑块值并显示每个滑块的ID =>值的警报。
HTML：
<div id="labels"><ul>
<li>DU:</li>
<li>GH:</li>
<li>LG:</li>
<li>SC:</li>
<li>VL:</li>
</ul></div><!-- #labels -->
<div id="report">
<span></span>0<span></span>1<span></span>2<span></span>3<br>
<div id="du" class="slide"></div>
<div id="gh" class="slide"></div>
<div id="lg" class="slide"></div>
<div id="sc" class="slide"></div>
<div id="vl" class="slide"></div>
</div>
<input type="button" id="reportSubmit" value="Submit" />
jQuery的：
var arrSliders;
$("#report > div").each(function() {
$( this ).empty().slider({
value: 0,
min: 0,
max: 3,
step: 1,
animate: true,
orientation: "horizontal"
}); //this.empty
}); //.each
$(document).on("click", "#reportSubmit", function() {
$("#report > div").each(function() {
var $this = $(this);
arrSliders = $(".slide").map(function() {
return {
id: $this.id,
value: $this.slider("value")
};
}).get();
for (var index in arrSliders) {
alert( arrSliders[index] );
}
}); //END .each
}); //END #reportSubmit.click()
$("#reportSubmit").button();
CSS：
li{list-style-type:none;margin:23px 0px;}
.slide{width:150px;margin-bottom:25px;margin-top:10px;margin-left:30px;}
#labels{float:left;}
#report{float:left;}
#reportSubmit{position:absolute;top:230px;left:50px;}
span{margin-right:40px;}
尝试
$(document).on("click", "#reportSubmit", function () {
var arrSliders = $("#report > div").map(function(){
return {
id: this.id,
value: $(this).slider("value")
};
}).get();
console.log(arrSliders)
}); //END #reportSubmit.click()
演示：小提琴
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句