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

Question

我正在创建一些飞行中的div，并使它们可以下垂。这样做的效果很好，我可以删除可拖放的内容，实际上可以达到droppable()函数。为了进行一些测试，我需要访问附加到div:jQuery.data(这个是"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);

​

编辑

另一个选项是直接在.data对象上使用jQuery方法。这样的设置：

​

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

然后

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