Question

我正在使用jQuery和jQuery UI根据用户配置的号码动态构建滑块。但是我遇到了麻烦，当我创建滑块时，似乎它使所有这些都成为最后一个制作的滑块。例如，我有八个滑块，每个滑块滑动时，将相应文本区域的值更改为我需要的值。但是现在所有的滑块都会改变第八个文本区域而不是相应的区域。

代码：

function buildSliders() {

 for(b = 0; b < bankCount; b ++)
 {
    $( "#slider"+b ).slider({
     value:20,
     min: 0,
     max: 254,
     step: 1,
     change: function( event, ui ) {
      sendDimCommand(b);
     }
    });
 }
};

function sendDimCommand(dimmerChannel) {
 var targetChannel = "sliderValue"+dimmerChannel;
 alert(targetChannel);
 document.getElementById(targetChannel).innerHTML = "blue";
}

我很确定有一种解决方法，我已经研究过.clone和.each之类的东西但是它们对我来说是不熟悉的概念，我不知道它们是如何工作的。正如您所看到的那样，当幻灯片值被更改时，函数非常相似，它们只需要更改目标。

任何帮助都会被贬低，谢谢。

**编辑

以下是我用来解决这个问题的代码：

function buildSliders（）{

 for(b = 0; b < bankCount; b ++)
 {
    $( "#slider"+b ).slider({
     value:20,
     min: 0,
     max: 254,
     step: 1,
     change: function( event, ui ) {
      sendDimCommand(this.attributes["value"].value);
     }
    });
 }
};

function sendDimCommand(dimmerChannel) {
 var targetChannel = "sliderValue"+dimmerChannel;
 alert(targetChannel);
 $( "#"+targetChannel ).text($( "#slider"+dimmerChannel ).slider( "value" ) )
}

当我创建div时：

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

Answer 1

似乎滑块对象未正确绑定。像下面这样的东西可能会......

function buildSliders(divName) {
   //divName - container for the sliders
        $(divName).each(function() {
            $(this).empty().slider({

Answer 2

我记得，将一个变量从for循环传递给回调时会出现问题。在.slider线上方，尝试添加

var c = b;

然后在你的回调中做

sendDimCommand(c);

我在使用jQuery.each时遇到了类似的问题，并且能够通过执行$that = $(this);然后在回调中使用$that来引用jQuery对象来解决问题。我认为类似的方法可能对你有帮助。

jQuery UI - 多个动态生成的滑块和函数，每个都有变化

2 个答案: