javascript - 在 JS For 循环中创建 Bootstrap slider

Question

我的应用程序中有一个 JS 功能，允许用户一次创建一个列表项目。我现在正在尝试为每个项目提供一个 Bootstrap slider ，但遇到了困难。我是 JS 的新手，所以这里可能有一些不好的想法(我很乐意帮助纠正)。按照目前的情况，如果我把所有东西都放在 <p> 之外for 循环添加的 html 中的标记按预期工作，但其中的所有内容都会呈现控制台错误，说明 Uncaught TypeError: Cannot read property 'getAttribute' of null .

var proArray = [];
	function addPro() {
		proArray.push(document.getElementById("proInput").value);
		document.getElementById("proForm").reset();
		console.log(proArray);
	  	for (var i = 0; i < proArray.length; i++) {
	       	newItem = "<li><p>" + proArray[i] + "</p><input class='bootstrap-slider' type='text' id='proInput" + i + "' data-slider-id='proInput" + i + "' data-slider-min='0' data-slider-max='10' data-slider-value='5' /></li>";
	  	}
       	var slider = new Slider('#proInput0', {
			formatter: function(value) {
				return 'Current value: ' + value;
			}
		});
       	document.getElementById("proList").innerHTML += newItem;
	}

   $('#proInput0').slider({
	formatter: function(value) {
		return 'Current value: ' + value;
	}
   });

<form id="proForm" onkeypress="return event.keyCode != 13;">
	    		<input class="form-control text-left pro-con-input" id="proInput" placeholder="Add New Benefit" />
	    	<div onclick="addPro()" class="btn pro-con-btn">Add</div>
    		</form>
	    	<h3 class="text-left">Benefits</h3>
	    	<ul class="text-left" id="proList">
	    	</ul>

任何人都可以帮助找出我哪里出错和/或如何做得更好吗？

Answer 1

主要问题与如何即时创建新元素有关:

在 for 循环中，您创建一个变量，在创建 slider 之后但仅在您将新元素附加到 dom 之后。

您永远不会测试具有相同 id 的元素是否已经存在。

主要是，您永远不会保存 slider 对象以备将来使用。

每次您创建一个新的 slider 时，您都需要销毁它并在几毫秒后重新创建它才能使其正常工作。

片段:

var proArray = [];
function addPro() {
    var val = document.getElementById("proInput").value.trim();
    document.getElementById("proForm").reset();
    if (val.length == 0) {
        return;
    }
    if (document.getElementById('proInput' + val) == null) {
        proArray.push({id: val, slider: null});
    } else {
        return;
    }
    for (var i = 0; i < proArray.length; i++) {
        var ele = document.getElementById('proInput' + proArray[i].id);
        if (ele == null) {
            var newItem = "<li><p>" + proArray[i].id + "</p><input class='bootstrap-slider' type='text' value='' id='proInput" +
                    proArray[i].id + "' data-slider-id='SIDproInput" + proArray[i].id
                    + "' data-slider-min='0' data-slider-max='10' data-slider-value='5'/></li>";
            document.getElementById("proList").innerHTML += newItem;
            proArray[i].slider = new Slider('#proInput' + proArray[i].id, {
                formatter: function(value) {
                    return 'Current value: ' + value;
                }
            });
        } else {
            (function(i) {
                setTimeout(function() {
                    var val = proArray[i].slider.getValue();
                    proArray[i].slider.destroy();
                    document.getElementById('SIDproInput' + proArray[i].id).remove();
                    proArray[i].slider = new Slider('#proInput' + proArray[i].id, {
                        formatter: function (value) {
                            return 'Current value: ' + value;
                        }
                    });
                    proArray[i].slider.setValue(val);
                }, 100);
            })(i);
        }
    }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.3/css/bootstrap-slider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.3/bootstrap-slider.min.js"></script>



<form id="proForm" onkeypress="return event.keyCode != 13;">
    <input class="form-control text-left pro-con-input" id="proInput" placeholder="Add New Benefit"/>

    <div onclick="addPro()" class="btn pro-con-btn">Add</div>
</form>
<h3 class="text-left">Benefits</h3>
<ul class="text-left" id="proList">
</ul>