我可以在回调函数中访问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");
                }
              }
            });

导致：
“未捕获的TypeError：无法读取未定义的属性'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应该是DOM元素，而不是jquery对象。 这就是为什么在尝试检索数据时会得到undefined 。

尝试像这样设置数据

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

要么

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

---

编辑
另一种选择是直接在jQuery对象上使用.data方法。 设置如下：

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

接着

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