1

我正在尝试通过下拉列表将多个 div 添加到页面中。

我遇到的问题：

var antal =  $('.room-holder').size();
var roomholder = '<div class="room-holder">' + $('.room-holder').html() + '</div>';
var rooms = "";

while ( $( this ).val() > ( antal + 0 ) ) {
    rooms = rooms + roomholder;
    antal++;
}

$( rooms ).insertAfter( $('.room-holder') );
rooms = "";

我也尝试过这样的 for 循环：

var many = ( $( this ).val() - antal );

for( i=0; i < many; i++){
    rooms = rooms + roomholder;
}

$( rooms ).insertAfter( $('.room-holder') );
antal =  $('.room-holder').size();
rooms = "";

下拉列表的值从 1 - 10

当我第一次选择时，我得到了正确数量的字段，但是当我第二次选择时，我得到了应该添加的数量加上 2-3 个字段。

有谁知道为什么？

编辑：我将它添加到 jsfiddle：http: //jsfiddle.net/gmKJw/

4

2 回答 2

0

错误是要插入的房间被附加到每个roomholder已经存在的房间。演示：小提琴

room-holder解决方法是在最后一个之后附加到新的room-holder

改变

$( rooms ).insertAfter( $('.room-holder') );

到

$( rooms ).insertAfter( $('.room-holder:last') );

演示：小提琴

于 2013-03-08T09:35:41.653 回答
0

如果您在下拉列表中选择的房间数量少于当前显示的房间数量，则可能会出现逻辑错误。我会提出以下解决方案（其中包括其他风格改进）：

var numRoomsReqd = parseInt( $(this).val(), 10);
var numCurrRooms =  $('.room-holder').length;        // use length, not size
var $roomholder = $('.room-holder').first().clone();
var $rooms = $();
$('.room-holder').slice(numRoomsReqd).remove()

while ( numCurrRooms < numRoomsReqd ) {
    $rooms = $rooms.add($roomholder.clone());
    numCurrRooms++;
}

$rooms.insertAfter( $('.room-holder').last() );
于 2013-03-08T09:39:03.337 回答