Javascript 带引导滑块的奇怪JS行为

因此，我得到了一位互联网圣徒的帮助，极大地改进了我的代码，在JS for循环中为每个列表项创建一个引导滑块，但现在它的行为不稳定

有时它工作得很好，另一些它创建新项目但不创建滑块（只是一个文本输入字段），还有一些它只为每个列表创建一个项目

有谁知道我错在哪里

var proArray=[]；
函数addPro（）{
var val=document.getElementById（“proInput”）.value.trim（）；
document.getElementById（“proForm”）.reset（）；
如果（val.length==0）{
返回；
}
if（document.getElementById（'proInput'+val）==null）{
push（{id:val，slider:null}）；
}否则{
返回；
}
对于（变量i=0；i”+proArray[i].id+”
”；
document.getElementById（“proList”）.innerHTML+=newItem；
proArray[i]。slider=新滑块（“#proInput”+proArray[i]。id{
格式化程序：函数（值）{
返回“当前值：”+值；
}
});
}否则{
（职能（一）{
setTimeout（函数（）{
var val=proArray[i]。slider.getValue（）；
proArray[i]。slider.destroy（）；
document.getElementById（'SIDproInput'+proArray[i].id）.remove（）；
proArray[i]。slider=新滑块（“#proInput”+proArray[i]。id{
格式化程序：函数（值）{
返回“当前值：”+值；
}
});
proArray[i].slider.setValue（val）；
}, 100);
})（i） )；
}
}
}
var conArray=[]；
函数addCon（）{
var valCon=document.getElementById（“conInput”）.value.trim（）；
document.getElementById（“符合”）.reset（）；
如果（valCon.length==0）{
返回；
}
if（document.getElementById（'conInput'+valCon）==null）{
push（{id:valCon，slider:null}）；
}否则{
返回；
}
对于（var i=0；i”+conArray[i].id+”
”；
document.getElementById（“conList”）.innerHTML+=newItem；
conArray[i]。slider=新滑块（“#conInput”+conArray[i]。id{
格式化程序：函数（值）{
返回“当前值：”+值；
}
});
}否则{
（职能（一）{
setTimeout（函数（）{
var valCon=conArray[i]。slider.getValue（）；
conArray[i]。slider.destroy（）；
document.getElementById（'SIDconInput'+conArray[i].id）.remove（）；
conArray[i]。slider=新滑块（“#conInput”+conArray[i]。id{
格式化程序：函数（值）{
返回“当前值：”+值；
}
});
conArray[i].slider.setValue（valCon）；
}, 100);
})（i） )；
}
}
}

赞成的意见
好东西

添加
利益


欺骗
坏东西

添加
成本

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

• var proArray=[]
• var conArray=[]

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

• newAdd（'pro'）
• newAdd（'con'）

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

评论如下：

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

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

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

片段：

var proArray=[]；
var conArray=[]；
函数newAdd（listIdPrefix）{
var val=document.getElementById（listIdPrefix+“输入”）.value.trim（）；
document.getElementById（listIdPrefix+“表单”）.reset（）；
如果（val.length==0）{
返回；
}
var-arr；
if（document.getElementById（listIdPrefix+'Input'+val）==null）{
如果（listIdPrefix=='pro'）{
push（{id:val，slider:null}）；
arr=proArray；
}否则{
push（{id:val，slider:null}）；
arr=conArray；
}
}否则{
返回；
}
对于（变量i=0；i”+arr[i].id+”
”；
document.getElementById（listIdPrefix+“List”）.innerHTML+=newItem；
arr[i].slider=new slider（“#”+listIdPrefix+“输入”+arr[i].id.replace（/@/g，“\\@”）.replace（/\？/g，“\\？”）.replace（/\./g，“\\”）{
格式化程序：函数（值）{
返回“当前值：”+值；
}
});
}否则{
（功能（i，arr）{
setTimeout（函数（）{
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+“输入”+arr[i].id.replace（/@/g，“\\@”）.replace（/\？/g，“\\？”）.replace（/\./g，“\\”），