我正在使用 https://seiyria.com/bootstrap-slider/为了有 slider ，但我无法理解这段代码中我的错误在哪里:
<button type="button" onclick="ap()">ap!</button>
<button type="button" onclick="remove()">remove!</button>
<div id="id1"></div>
<script>
function ap() {
console.log("Append");
$("#id1").append(t);
}
function remove() {
console.log("Remove");
$("#x1").remove();
}
t = '<div id="x1"><span id="ex18-label-1" class="hidden">Example slider label</span> ' +
'<input id="ex19" type="text" ' +
'data-provide="slider" ' +
'data-slider-ticks="[1, 2, 3]" ' +
'data-slider-ticks-labels="["short", "medium", "long"]" ' +
'data-slider-min="1" ' +
'data-slider-max="3" ' +
'data-slider-step="1" ' +
'data-slider-value="3" ' +
'data-slider-tooltip="hide" /></div>'
</script>
我想按下一个按钮以显示一个 slider 并使用另一个按钮将其移除。
最佳答案
<html>
<body>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.3.1/css/bootstrap-slider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.3.1/bootstrap-slider.min.js"></script>
<button type="button" onclick="ap()">ap!</button>
<button type="button" onclick="remove()">remove!</button>
<div id="id1">
</div>
<div id="x1"><span id="ex18-label-1" class="hidden">Example slider label</span> <input id="ex19" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels="["short", "medium", "long"]" data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="3" data-slider-tooltip="hide" /></div>
</body>
</html>
<script>
$("#x1").hide();
function ap()
{
console.log("Append");
$("#x1").show();
}
function remove()
{
console.log("Remove");
$("#x1").hide();
}
</script>只需使用 javascript 隐藏和显示 slider 即可。
关于javascript - Bootstrap 的 slider 添加和删除 jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53497635/