Question

我的应用程序中有一个JS功能，允许用户一次创建一个项目列表。我现在正在尝试给每个项目一个引导滑块，但遇到了困难。我是JS的新手，所以这里可能会有一些不好的想法（我很乐意帮助纠正）。目前的情况是，如果我将for循环中添加的html中的<p>标记之外的所有内容都按预期运行，但是其中的所有内容都会导致控制台错误，指出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循环中，在创建滑块后创建一个变量，但只有在将新元素追加到dom之后才会创建。

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

主要是，您永远不会保存滑块对象以供将来使用。

每次创建新滑块时，都需要在几毫秒后销毁并重新创建它，以使其正常工作。

摘录：

＆＃13;

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);
        }
    }
}

＆＃13;

<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>

＆＃13;

在JS For循环中创建Bootstrap滑块

1 个答案: