正确使用jQuery .data()

时间:2011-09-01 09:55:54

标签: jquery image

请注意我已用新数据和链接更新了这个问题

我的代码基于this documentation

代码在这里工作:http://jsfiddle.net/mplungjan/7ZBxP/

但不在这里:

我得到Error: $(this).data("orgSize") is undefined

width: $(this).data("orgSize").width,

  $(".ui-tooltip img.thumb")
 .live("mouseenter",function() {
    cont_left = $(".ui-tooltip").position().left; // no container until hover 
    // save this scaled down image size for later
    $(this).data("newSize",{width:this.width,height:this.height})
    $(this).parent().parent().css("z-index", 1);    
    $(this).animate({
      width: $(this).data("orgSize").width,
      height: $(this).data("orgSize").height,
      left: "-=50",
      top: "-=50"
    }, "fast");
  })

这是我定义的地方:

    var imageObject = $('<img/>').load(function(){
      var w = this.width;
      var h = this.height;
      var orgSize = {width:w,height:h};
      var imgId = "thumb_"+p_sPubNum;
      var actualImage = $('<img/>')
         .attr("id",imgId)
         .attr("src",sOpsUrl + sImageUrl)
         .attr("alt",loadingLabel+': '+p_sPubNum)
         .addClass("thumb");             
      // set EITHER width OR height if either is > 150
      if (w<h && w>150) actualImage.attr("width",150);
      else if (w>h && h > 150) actualImage.attr("height",150);

      $('.qTip2Image').append(actualImage);
      // save original size for later    
      $("#"+imgId).data("orgSize",orgSize);

    }).error(function() {
      if ((iPos + 1) < aPublicationNumbers.length) {
        var sNextNumber = aPublicationNumbers[(iPos + 1)];
        getImage(sNextNumber, sDirection);
      }
    }).attr("src",sOpsUrl + sImageUrl);

3 个答案:

答案 0 :(得分:1)

$('.qTip2Image').append(actualImage);
  // save original size for later    
$("#"+imgId).data("orgSize",orgSize); // <<<<<<<<<< too early

var actualImage = $('<img/>')
 .attr("id",imgId)
 .attr("src",sOpsUrl + sImageUrl)
 .attr("alt",loadingLabel+': '+p_sPubNum)
 .addClass("thumb")
 .data("orgSize",orgSize);  // <<<<<<<<<< This is much better!!!

它在小提琴中起作用的原因是更小的DOM

答案 1 :(得分:0)

它给你未定义,因为你正在访问未定义的width属性,因为你刚刚创建了元素!

从这个小提琴中可以看出代码是正确的

http://jsfiddle.net/ZL4DG/

答案 2 :(得分:0)

您没有设置图片的src,您认为它会如何触发load事件。在这种情况下附加错误event处理程序。此外,您没有为创建的元素设置任何宽度和高度,因此在没有源集的情况下它不会有任何默认尺寸。

代码中定义的imgId在哪里?你在哪里设置id到新创建的元素?在这种情况下,它将如何找到$("#"+imgId)