我想制作一个页面,人们可以在此页面上指出一些兴趣。
最多可以有50点,我想用几个滑块散布一下。因为它已保存在数据库中,所以每个兴趣都有一个默认值。
已经在网上找到了很多东西,经过^ @ ^ ##小时后,它仍然无法正常工作。如果我给一个滑块设置一个(默认)值,其余的将不再起作用。我尝试了很多事情,但现在我真的不知道了。
我做错了什么?还是这将永远不适用于我的代码?我仍在学习 :(
html
<p>total available points 50 </p>
<div id="sliders">
<div>
<div class="slider"></div>
<input type="text" class="value" value="0" />
</div>
<div>
<div class="slider"></div>
<input type="text" class="value" value="0" />
</div>
<div>
<div class="slider"></div>
<input type="text" class="value" value="7" />
</div>
<div>
<div class="slider"></div>
<input type="text" class="value" value="0" />
</div>
<div>
<div class="slider"></div>
<input type="text" class="value" value="0" />
</div>
<div>
<div class="slider"></div>
<input type="text" class="value" value="0" />
</div>
</div>
<div class="slider"></div>
javascript
$(window).load(function(){
var sliders = $("#sliders .slider");
var availableTotal = 50;
sliders.each(function() {
$(this).empty().slider({
value: 0,
min: 0,
max: 50,
range: "max",
step: 1,
animate: 100,
create: function () {
$(this).slider( "option", "value", $(this).next().val() );
},
slide: function(event, ui) {
// Get current total
var total = 0;
sliders.not(this).each(function() {
total += $(this).slider("option", "value");
});
var max = availableTotal - total;
if (max - ui.value >= 0) {
// Need to do this because apparently jQ UI
// does not update value until this event completes
total += ui.value;
// console.log(max-ui.value);
$(this).siblings().val(ui.value);
} else {
return false;
}
//get total sum of all points
var sum = 0;
$(".value").each(function(){
sum += +$(this).val();
});
$(".total").text(sum);
}
});
});
});
JS fiddle
最佳答案
如果我添加一个在开始时设置了所有幻灯片的功能,是否可以正常工作?输入框的值将由php设置。
关于javascript - jQuery的UI多个滑块与默认值和组合最大,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33545645/