Javascript jQueryUI-多个动态生成的滑块和每个滑块的更改函数
我使用jQuery和jQuery UI根据用户配置的数字动态构建滑块。然而,我有麻烦的是,当我创建滑块时,它似乎使所有的滑块都变成了最后一个滑块。例如,我有八个滑块,每个滑块滑动时,会将相应文本区域的值更改为我需要的值。然而,现在所有的滑块都改变了第八个文本区域,而不是相应的文本区域 代码:Javascript jQueryUI-多个动态生成的滑块和每个滑块的更改函数,javascript,jquery,jquery-ui,slider,dynamically-generated,Javascript,Jquery,Jquery Ui,Slider,Dynamically Generated,我使用jQuery和jQuery UI根据用户配置的数字动态构建滑块。然而,我有麻烦的是,当我创建滑块时,它似乎使所有的滑块都变成了最后一个滑块。例如,我有八个滑块,每个滑块滑动时,会将相应文本区域的值更改为我需要的值。然而,现在所有的滑块都改变了第八个文本区域,而不是相应的文本区域 代码: 函数构建滑块(){ 对于(b=0;b
函数构建滑块(){
对于(b=0;b
我很确定有办法解决这个问题,我已经研究了.clone和.Every之类的东西,但是它们对我来说都是陌生的概念,我不知道它们是如何工作的,也不知道它们是否会工作。正如您所看到的,当幻灯片值更改时,函数都非常相似,它们只需更改目标
任何帮助都会被告知的,谢谢
**编辑
下面是我用来解决这个问题的代码:
函数生成器滑块(){
(b=0;b
{
$(“#滑块”+b).滑块({
价值:20,
分:0,,
最高:254,
步骤:1,
更改:功能(事件、用户界面){
sendDimCommand(this.attributes[“value”].value);
}
});
}
};
功能sendDimCommand(dimmerChannel){
var targetChannel=“sliderValue”+dimerchannel;
警报(目标通道);
$(“#”+目标通道).text($(“#滑块”+变光通道).slider(“值”))
}
当我把潜水舱装进板条箱时:
for(r = 0; r < bankCount; r ++)
{
var trTag = document.createElement("tr");
tableTag.appendChild(trTag);
var sliderLabelTag = document.createElement("td");
sliderLabelTag.className = "RelayLabel";
sliderLabelTag.colSpan= 2;
sliderLabelTag.innerHTML = relayNames[r] + ": Slider Value";
trTag.appendChild(sliderLabelTag);
var sliderValueTag = document.createElement("td");
sliderValueTag.id = "sliderValue" + r;
sliderValueTag.innerHTML = "Waiting to Query";
trTag.appendChild(sliderValueTag);
var trTag = document.createElement("tr");
tableTag.appendChild(trTag);
var sliderCell = document.createElement("td");
sliderCell.id = "Slider" + r;
sliderCell.className = "sliderCell";
sliderCell.colSpan = 3;
sliderCell.innerHTML = "<div id=\"slider" + r + "\" value=\"" + r + "\" class=\"" + r + "\" name=\"" + r + "\"></div>";
trTag.appendChild(sliderCell);
}
for(r=0;r
我记得,将变量从for循环传递到回调时会出现问题。
在.滑块线的正上方,尝试添加
var c=b代码>
然后在你的回调中做什么
sendDimCommand(c);
我在使用jQuery.each时遇到过类似的问题,并且能够通过执行$that=$(this)来绕过这个问题
然后在回调中使用$that
引用jQuery对象。我认为类似的方法可能对您有所帮助。滑块对象似乎没有正确绑定。像下面这样的事情也许可以
function buildSliders(divName) {
//divName - container for the sliders
$(divName).each(function() {
$(this).empty().slider({
您可以发布其余的代码,或者更好的是发布一个JSFIDLE吗?我可以发布我用来绕过它的代码:我尝试了这个,但似乎不起作用。你认为使用一个.每个函数就可以了吗?如果是这样的话,你知道这项技术的好教程或介绍吗?我喜欢jQueryAPI文档中的这些信息,它们通常会有用户的有用评论,这正是我所想的。我设法只给每个div动态生成的值,并查询这些值,这样我就可以传递它们,而且效果很好。无论如何,我都会给你正确的答案,因为我认为这同样有效。
sendDimCommand(c);
function buildSliders(divName) {
//divName - container for the sliders
$(divName).each(function() {
$(this).empty().slider({