javascript - JS 不是保存在 DOM 中的对象吗？

Question

我有这个脚本与 jquery 和 uploadify 一起使用

      $('#uploader').uploadify({
    'uploader'  : '/admin/includes/uploadify/uploadify.swf',
    'script'    : '/admin/includes/uploadify/uploadify_storage.php',
     'scriptData': {'sessionId': sessionId},
    'cancelImg' : '/admin/includes/uploadify/cancel.png',
     'buttonImg'   : '/site_images/add_files.png',
    'folder'    :  storage,
    'auto'      : false,
    'multi'     : true,
    'fileExt'     : '*.jpg',
    'simUploadLimit' : 2,
    'wmode': 'transparent',
    'width': '150',
    'height': '20',
    'removeCompleted': false,
    'queueID'        : 'upload_queue',
    'onComplete'  : function(event, ID, fileObj, name,response, data) {

                             console.log(path);
             console.log(sub_ul);       
        }
  });

//code//


    $("li.dir > span.name").live('click', function(){
         $("span").removeClass("selected");
        var li = $(this).parent();
        var root  = $(li).attr("title");
        var folder  = $(li).find("span.name").html();
        var path = root+"/"+folder;
        path = path.replace('//', '/');
        var sub_ul = $(li).find("> ul.sub_folder");
                    set_path(sub_ul);
        $(this).addClass("selected");
    });

基本上，当我点击 .name 的跨度时它运行代码获取 var sub_ul = $(li).find("> ul.sub_folder");哪个有效(发送到 set_path() )。当我第二次在OnComplete最后启动uploadify时console.log(path);显示正确的值，但 console.log(sub_ul);不返回任何内容(也返回警报)，就像未指定对象一样。 JS运行后就不能使用对象了？难道它们不是像path一样保存在DOM中吗？是吗？

Answer 1

1. 在 onComplete您发布的函数，您正在记录 ul_sub而不是sub_ul正如你所希望的那样。

2. 除非 set_path()您为名为 path 的全局变量设置值，我不明白如何在这两个不同的函数中获得相同的值 - 变量 path click内处理程序的范围仅限于该函数，并且在其他地方无法访问。 sub_ul 也是如此。 .

3. I can't use objects after the JS has run? Don't they stay saved in the DOM like path does?

   我不太确定这是怎么回事，JavaScript 对象没有“保存在 DOM 中”。如果您无法访问您创建的对象，则上下文必须与创建该对象的上下文不同 - 它现在必须超出范围，因此无法访问。使用闭包是保持函数和变量可访问的一种方法。使用全局变量是另一种方法，但不推荐，除非绝对必要，否则应避免使用。

<小时/>

您可能想阅读这些有关 JavaScript 作用域的文章，以更好地了解其工作原理:

• http://coding.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/
• http://www.mredkj.com/tutorials/reference_js_intro_ex.html
• http://www.digital-web.com/articles/scope_in_javascript/

<小时/>

您在评论中提到您已经创建了全局 path变量但不是 sub_ul 。 “修复”代码的一种简单方法是使用全局变量。但同样，通常不鼓励使用全局变量，因为您最终可能会污染全局命名空间。

如果没有看到更多代码，很难说这是否总是能正常工作 - 例如，您的 uploadify 脚本可能会由不会导致 path 值的事件触发。和sub_ul被设置，这意味着当 onComplete函数运行时，它会得到两者的错误值。

//global vars
var path;
var sub_ul;

$('#uploader').uploadify({
    'uploader'  : '/admin/includes/uploadify/uploadify.swf',
    'script'    : '/admin/includes/uploadify/uploadify_storage.php',
     'scriptData': {'sessionId': sessionId},
    'cancelImg' : '/admin/includes/uploadify/cancel.png',
     'buttonImg'   : '/site_images/add_files.png',
    'folder'    :  storage,
    'auto'      : false,
    'multi'     : true,
    'fileExt'     : '*.jpg',
    'simUploadLimit' : 2,
    'wmode': 'transparent',
    'width': '150',
    'height': '20',
    'removeCompleted': false,
    'queueID'        : 'upload_queue',
    'onComplete'  : function(event, ID, fileObj, name,response, data) {
                        //these will now log the values of the global vars
                        console.log(path);
                        console.log(sub_ul);       
                    }
});

//code//


$("li.dir > span.name").live('click', function(){
    $("span").removeClass("selected");
    var li = $(this).parent();
    var root  = li.attr("title");
    var folder  = li.find("span.name").html();
    //don't redeclare path - that would shadow the global variable
    //use the global variable instead
    path = root+"/"+folder;
    path = path.replace('//', '/');
    //don't redeclare sub_ul
    sub_ul = $(li).find("> ul.sub_folder");
    set_path(sub_ul);
    $(this).addClass("selected");
});