对于制作网络应用程序来说，这是一个全新的尝试，并且试图从[这个提琴例子]中复制这些滑块(http://jsfiddle.net/redsunsoft/capab/2/)但无论我怎么做，都无法显示滑块/互动性。下面是我试图用python/flask呈现的html（当我尝试示例中的一个简单对象时，基本的jqueryui对象/滑块可以工作），但这个不呈现。这是滑块不会渲染的输出。这里的任何帮助/指导都将非常好！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple HTML Document</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
var sliders = $("#sliders .slider");
var availableTotal = 100;
sliders.each(function() {
var init_value = parseInt($(this).text());
$(this).siblings('.value').text(init_value);
$(this).empty().slider({
value: init_value,
min: 0,
max: availableTotal,
range: "max",
step: 2,
animate: 0,
slide: function(event, ui) {
// Update display to current value
$(this).siblings('.value').text(ui.value);
// Get current total
var total = 0;
sliders.not(this).each(function() {
total += $(this).slider("option", "value");
});
// Need to do this because apparently jQ UI
// does not update value until this event completes
total += ui.value;
var delta = availableTotal - total;
// Update each slider
sliders.not(this).each(function() {
var t = $(this),
value = t.slider("option", "value");
var new_value = value + (delta/2);
if (new_value < 0 || ui.value == 100)
new_value = 0;
if (new_value > 100)
new_value = 100;
t.siblings('.value').text(new_value);
t.slider('value', new_value);
});
}
});
});
</script>
</head>
<body>
<ul id="sliders">
<li>
<div class="slider">70</div>
<span class="value">0</span>%
</li>
<li>
<div class="slider">20</div>
<span class="value" >0</span>%
</li>
<li>
<div class="slider">10</div>
<span class="value">0</span>%
</li>
</ul>
</body>
</html>
暂无答案！
目前还没有任何答案，快来回答吧！