Bootstrap 添加和删除 jQuery 的滑块答案

【问题标题】：Slider for Bootstrap add&remove jQueryBootstrap 添加和删除 jQuery 的滑块
【发布时间】：2019-04-29 01:45:46
【问题描述】：

我使用https://seiyria.com/bootstrap-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>

我想按下一个按钮来显示一个滑块并用另一个按钮移除。

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

<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 隐藏和显示滑块。

【讨论】：

【解决方案2】：

这应该可以了，你忘记了 ap 中的 t 参数

function ap(t) {
    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>';

$("#show").click(function() {
    ap(t);
});

$("#hide").click(function() {
    remove();
});


function get_data(name) {
    name.value = 'test';
}

<button id="show">show</button>
<button id="hide">hide</button>
<div id="id1"></div>

【讨论】：