2

jQuery と jQuery UI を使用して、ユーザーが構成した数値に基づいてスライダーを動的に作成しています。ただし、スライダーを作成すると、最後に作成されたスライダーがすべて作成されるように見えるという問題があります。たとえば、8 つのスライダーがあり、それぞれをスライドさせると、対応するテキスト領域の値が必要な値に変更されます。ただし、現時点では、すべてのスライダーが、対応するテキスト領域ではなく、8 番目のテキスト領域を変更します。

コード：

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 に答える