Question

所以我收到了互联网圣徒的帮助，大大改善了我的代码，在JS for循环中为每个列表项创建一个引导滑块，但现在它的行为不正常。

有时它可以完美运行，有些则可以创建新项目而不是滑块（只是文本输入字段），而有些只会创建每个列表中的一个项目。

任何伟大的头脑都会看到我出错的地方？

＆＃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);
	        }
	    }
	}

	var conArray = [];
	function addCon() {
	    var valCon = document.getElementById("conInput").value.trim();
	    document.getElementById("conForm").reset();
	    if (valCon.length == 0) {
	        return;
	    }
	    if (document.getElementById('conInput' + valCon) == null) {
	        conArray.push({id: valCon, slider: null});
	    } else {
	        return;
	    }
	    for (var i = 0; i < conArray.length; i++) {
	        var ele = document.getElementById('conInput' + conArray[i].id);
	        if (ele == null) {
	            var newItem = "<li><p>" + conArray[i].id + "</p><input class='bootstrap-slider' type='text' value='' id='conInput" +
	                    conArray[i].id + "' data-slider-id='SIDconInput" + conArray[i].id
	                    + "' data-slider-min='0' data-slider-max='10' data-slider-value='5'/></li>";
	            document.getElementById("conList").innerHTML += newItem;
	            conArray[i].slider = new Slider('#conInput' + conArray[i].id, {
	                formatter: function(value) {
	                    return 'Current value: ' + value;
	                }
	            });
	        } else {
	            (function(i) {
	                setTimeout(function() {
	                    var valCon = conArray[i].slider.getValue();
	                    conArray[i].slider.destroy();
	                    document.getElementById('SIDconInput' + conArray[i].id).remove();
	                    conArray[i].slider = new Slider('#conInput' + conArray[i].id, {
	                        formatter: function (value) {
	                            return 'Current value: ' + value;
	                        }
	                    });
	                    conArray[i].slider.setValue(valCon);
	                }, 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>

<div class="col-sm-6">
	    	<h2>Pros</h2>
	    	<p>The Good Stuff</p>
	    	<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>
	    </div> <!-- pros -->

	    <div class="col-sm-6">
	    	<h2>Cons</h2>
	    	<p>The Bad Stuff</p>
	    	<form id="conForm" onkeypress="return event.keyCode != 13;">
			    <input class="form-control text-left pro-con-input" id="conInput" placeholder="Add New Benefit"/>
			    <div onclick="addCon()" class="btn pro-con-btn">Add</div>
			</form>
			<h3 class="text-left">Costs</h3>
			<ul class="text-left" id="conList">
			</ul>
	    </div> <!-- cons -->

＆＃13;

Answer 1

因为您有两个列表，所以可以使用两个数组：

var proArray = [];
var conArray = [];

可以更改内联函数，以便将列表前缀作为参数传递：

newAdd（ '亲'）
newAdd（ 'CON'）

因此您可以根据这些更改调整addPro功能。

来自评论：

如果我输入“@”或“？”作为上面代码段中的项目，它会显示错误。不适合你？

为了解决这个问题，你需要在创建滑块时转义这些字符：

$parts = preg_split('~\b(?=\d{5}\b)~', $str);
$result = [];
foreach ($parts as $part) {
    preg_match($pattern, $part, $m);
    $result[] = [$m['id'], $m['desc'], $m['val1'], $m['val2']];
}

摘录：

arr[i].slider = new Slider('#' + listIdPrefix + 'Input' +
         arr[i].id.replace(/@/g, '\\@').replace(/\?/g, '\\?').....

var proArray = [];
var conArray = [];
function newAdd(listIdPrefix) {
    var val = document.getElementById(listIdPrefix + "Input").value.trim();
    document.getElementById(listIdPrefix + "Form").reset();
    if (val.length == 0) {
        return;
    }
    var arr;
    if (document.getElementById(listIdPrefix + 'Input' + val) == null) {
        if (listIdPrefix == 'pro') {
            proArray.push({id: val, slider: null});
            arr = proArray;
        } else {
            conArray.push({id: val, slider: null});
            arr = conArray;
        }
    } else {
        return;
    }
    for (var i = 0; i < arr.length; i++) {
        var ele = document.getElementById(listIdPrefix + 'Input' + arr[i].id);
        if (ele == null) {
            var newItem = "<li><p>" + arr[i].id + "</p><input class='bootstrap-slider' type='text' value='' id='" + listIdPrefix + "Input" +
                    arr[i].id + "' data-slider-id='SID" + listIdPrefix + "Input" + arr[i].id
                    + "' data-slider-min='0' data-slider-max='10' data-slider-value='5'/></li>";
            document.getElementById(listIdPrefix + "List").innerHTML += newItem;
            arr[i].slider = new Slider('#' + listIdPrefix + 'Input' + arr[i].id.replace(/@/g, '\\@').replace(/\?/g, '\\?').replace(/\./g, '\\.'), {
                formatter: function (value) {
                    return 'Current value: ' + value;
                }
            });
        } else {
            (function (i, arr) {
                setTimeout(function () {
                    var val = arr[i].slider.getValue();
                    arr[i].slider.destroy();
                    document.getElementById('SID' + listIdPrefix + 'Input' + arr[i].id).remove();
                    arr[i].slider = new Slider('#' + listIdPrefix + 'Input' + arr[i].id.replace(/@/g, '\\@').replace(/\?/g, '\\?').replace(/\./g, '\\.'), {
                        formatter: function (value) {
                            return 'Current value: ' + value;
                        }
                    });
                    arr[i].slider.setValue(val);
                }, 100);
            })(i, arr);
        }
    }
}

引导滑块的奇怪JS行为

1 个答案: