javascript - 我可以在回调函数中访问 jquery.data 吗？

Question

我正在动态创建许多 div 并使它们可放置。这效果很好，我可以删除可拖动对象，并且实际上达到了函数 droppable() 。为了进行一些测试，我需要访问附加到 div 的数据:jQuery.data(this,"pos") 并将其与附加到可拖动 div 的数据进行比较。

问题是 ep 和 fp 未定义。

            document.write("<div id='tar_"+i+"' class='droppable' style='position:fixed;z-index:10;top:"+tar_y+"px; left:"+x+"px;'>"+phrase.charAt(i)+"</div>");
            var tar = $( "#tar_"+i );
            targets.push(tar);
            jQuery.data(targets[i],"pos",i);
            targets[i].droppable({
            drop: function( event, ui ) {
                var ep = jQuery.data(this,"pos");
                var fp = jQuery.data(ui.draggable,"expos");
                if(ep==fp) {
                    alert("great");
                } else {
                    alert("next time");
                }
              }
            });

在此上下文中是否可以访问 jquery.data？

按照建议，我尝试了以下方法，但 ep 和 fp 仍然未定义。

            drop: function( event, ui ) {
                var ep = $(this).data("pos");
                var fp = $(ui.draggable).data("expos");
                if(ep==fp) {
                    alert("great");
                } else {
                    alert("next time");
                }
              }
            });

另一个建议:

            drop: function( event, ui ) {
                var ep = jQuery.data(targets[i],"pos");
                var fp = jQuery.data(letters[i],"pos");;
                if(ep==fp) {
                    alert("great");
                } else {
                    alert("next time");
                }
              }
            });

导致:
“未捕获类型错误:无法读取未定义的属性‘nodeType’”
这可能是有道理的，因为调用 drop 函数时局部变量 i 并不真正可用。

更多背景信息

        for(i=0; i<phrase.length; i++) {
            document.write("<div id='chr_"+i+"' class='draggable' style='position:fixed;z-index:10;top:"+y+"px; left:"+x+"px;'>"+phrase.charAt(i)+"</div>");
            var src = $( "#chr_"+i );
            letters.push(src);
            letters[i].draggable({
                    drag: function( event, ui ) {
                        jQuery.data(ui,"moving",false); //need to access the stored data here what doesn't seem to work like this.
                    }
                  });
            jQuery.data(letters[i],"moving",true);
            jQuery.data(letters[i],"expos",i);
            document.write("<div id='tar_"+i+"' class='droppable' style='position:fixed;z-index:10;top:"+tar_y+"px; left:"+x+"px;'>"+phrase.charAt(i)+"</div>");
            var tar = $( "#tar_"+i );
            targets.push(tar);
            jQuery.data(targets[i],"pos",i);
            targets[i].droppable({
            drop: function( event, ui ) {
                //need to access the data here, 
                //but doesn't seem to work in the 
                //following ways (t1-3):
                var t1 = $(this).data("pos");
                var t2 = jQuery.data(targets[i],"pos");  
                var t3 = jQuery.data($(ui.draggable),"expos");
                if(ep==fp) {
                    alert("great");
                } else {
                    alert("next time");
                }
              }
            });
        }

我做错了什么？

Answer 1

注意正确使用jQuery.data :

jQuery.data( element, key, value )

element 应该是 DOM 元素，而不是 jquery 对象。这就是为什么当尝试检索数据时，您会得到未定义。

尝试像这样设置数据

jQuery.data(targets[i][0],"pos",i);

或

jQuery.data(targets[i].get(0),"pos",i);

<小时/> 编辑
另一种选择是使用 .data直接在 jQuery 对象上调用方法。设置如下:

targets[i].data("pos",i);

然后

$(this).data("pos");