Question

我有一些JS代码可以通过使用他们的类来跟踪DOM元素的位置。但是，我需要在特定的时间内更改此类名。到目前为止我的代码是：

所有添加的代码，是我努力工作的不良代码，只是为了让您了解我的意思。

     var offset = 0,
        xPos = 0,
        yPos = 0,
        item_number = 0; //added code

$(document).ready(function(){


    while(item_numer<5) { //added code
        $(".item" + item_number ).draggable({ //added code, the "item" has to be shown on the website as "item0".

        containment: '#house_wall1',

        drag: function(){
            offset = $(this).position();
            xPos = offset.left;
            yPos = offset.top;
            $('#posX').text('x: ' + xPos);
            $('#posY').text('y: ' + yPos);
        },

        // Find original position of dragged image.
        start: function(event, ui) {
            // Show start dragged position of image.
            var Startpos = $(this).position();
            $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
        },

        // Find position where image is dropped.
        stop: function(event, ui) {
            // Show dropped position.
            var Stoppos = $(this).position();
            $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
        }
    });
    item_number++;
    }
});

Answer 1

你的结尾}过早了。

对.draggable()的调用以及传递给它的Object文字实际上会延伸到底部附近的第一个});。循环应该包围所有循环。

$(document).ready(function(){
    while (item_number < 5) {
        $('.item' + item_number).draggable({
            // around 20 lines
        });

        item_number++; // increment counter
    }                  // and end of loop
});

虽然，计数器可能没有必要。由于您使用的是class选择器，因此可以重复使用class个名称，.draggable()将适用于每个匹配的元素。

$(document).ready(function () {
    $('.item').draggable({
        // ...
    });
});

Answer 2

您是否只是错过item_number上的增量？

while(item_numer<5) {
  $(".item" + item_number ).draggable({ /* stuff */ });
  item_number++;
}

JS while循环更改值

2 个答案: