2

我正在使用 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 之类的东西，但是它们对我来说是不熟悉的概念，我不知道它们如何或是否会起作用。正如你所看到的，当滑动值改变时的功能都非常相似，它们只需要改变目标。

任何帮助将不胜感激，谢谢。

**编辑

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

函数 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);
}
4

2 回答 2

1

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

function buildSliders(divName) {
   //divName - container for the sliders
        $(divName).each(function() {
            $(this).empty().slider({
于 2012-06-19T20:46:39.207 回答
0

我记得，将变量从 for 循环传递到回调时存在问题。在您的 .slider 行上方，尝试添加

var c = b;

然后在你的回调中做

sendDimCommand(c);

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

于 2012-06-19T20:21:53.477 回答