Question

我在下面有一些jQuery代码，它们试图将多个文件夹图标放在图库窗格的顶部。 AJAX调用检索文件夹信息，它只是一个看起来像这样的字符串：

"boots,50,120,socks,50,160,shoes,50,200,"

其中，在这种情况下，有三个文件夹：“靴子”位于顶部= 50，左侧= 120，袜子等。

对于返回数据中的每个文件夹，代码尝试创建一个div，其中包含一个文件夹图标，根据来自AJAX调用的数据对其进行定位并将其附加到DOM。但是有些事情是非常错误的，因为我正在制作多个具有相同名称和相同偏移量的多个文件夹。

$.post('ajax.php', {op : 'get_folders'},       
  function(responseTxt, statusTxt, xhr) {  
    var folderDiv;
    var folders =     responseTxt.split(",");

    for (i=0; i<folders.length; i=i+3){
      name=folders[i];
      posTop=folders[i+1];
      posLeft=folders[i+2];

      folderDiv = '<div class=openclosed_folder_icon>' +
                  '<img class="folder_icon" src="images/folder_closed.png"  alt="closed folder"  />' +
                  '<div class="folder_name" >name</div>' + 
                  '</div>';

      $(folderDiv).find('.folder_name').text(name);
      $(folderDiv).attr({'id' : name});
      $(folderDiv).draggable(folder_icon_dragOps)
                  .css({'cursor'     : 'pointer',
                        'position'   : 'absolute',
                        'top'        : posTop,
                        'left'       : posLeft
                       }) 
                  .appendTo('#galleryHeader');
  } 
});

是否有人发现此代码存在问题？

Answer 1

每次执行$(folderDiv)时，您都重新创建 DOM元素并创建新 jQuery对象。您需要拨打$(folderDiv) 一次，并将其保存到变量中。

var folderDiv = '<div class=openclosed_folder_icon>' +
       '<img class="folder_icon" src="images/folder_closed.png"  alt="closed folder"  />' +
       '<div class="folder_name">'+name'+</div>' + 
        '</div>';
var $folderDiv = $(folderDiv); // Convert this into a DOM element, and save the jQuery object

// Do actions on the saved jQuery object, so that you are editing the *same* DOM element

// You can chain together these calls
$folderDiv.find('.folder_name').text(name).attr({'id' : name});
$folderDiv.draggable(folder_icon_dragOps).css({
    'cursor':'pointer',
    'position': 'absolute',
    'top': posTop,
    'left': posLeft
}).appendTo('#galleryHeader');

无法创建DIV的多个版本

1 个答案: