Question

我目前正在尝试使用jQuery脚本来查看通过锚点href链接到的图像的尺寸。但是我当前的方法导致变量包含宽度，说明它没有定义。

我必须做这种脏方法的原因是我无法控制HTML，所以我试图在这里使用什么。

HTML：

<ul class="push--down">
    <li><a href="http://i.telegraph.co.uk/multimedia/archive/02883/gameofthrones2jpg_2883318b.jpg">This is a link to an image</a></li>
    <li><a href="http://i.telegraph.co.uk/multimedia/archive/02883/gameofthrones2jpg_2883318b.jpg">This is a link to an image</a></li>
</ul>

jQuery的：

$(document).ready(function(){

  var imgWidth,
  imgHeight;

  var linkedImage = $(".push--down li a");

  linkedImage.each(function(i, el){

    var href_value = el.href;

      if (/\.(jpg|png|gif)$/.test(href_value)) {

        var imgSrc = href_value;

        $("<img/>").attr("src", imgSrc).load(function() {
          imgWidth = this.width;
          imgHeight = this.height;
          console.log(imgWidth);
        });

         //console.log(href_value + " is a pic");
         $(this).click(function(e){ e.preventDefault(); });
         $(this).attr("onclick","window.open(this.href, 'mywindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=' + imgWidth + ',height=auto');");
      } else {
         //console.log(href_value + " is not a pic");
      }
  });

});

注意这一行是我引用imgWidth var：

的地方

$(this).attr("onclick","window.open(this.href, 'mywindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=' + imgWidth + ',height=auto');");

工作示例： http://codepen.io/vdecree/pen/ykjdi/

请注意，我不是jQuery pro，所以这可能有点混乱，但这一切都与这一部分不同 - 我完全愿意接受改进。

EDIT *****************

我发现通过将设置窗口属性的行移动到获得实际imgWidth + imgHeight的部分内部 - 事情开始变得有效。但是在这样做时，它不再仅仅将其应用于具有图像的href。

jQuery的：

$(window).load(function(){

  var imgWidth,
        imgHeight;

  var linkedImage = $(".push--down li a");

  linkedImage.each(function(i, el){

    var href_value = el.href;

      if (/\.(jpg|png|gif)$/.test(href_value)) {

        var imgSrc = href_value;

        $("<img>").attr("src", imgSrc).load(function() {
          imgWidth = this.width;
          imgHeight = this.height;

          //LINE THATS BEEN MOVED **********************
          linkedImage.attr("onclick","window.open(this.href, 'mywindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=" + imgWidth + ",height=" + imgHeight + "');");
        });

         //console.log(href_value + " is a pic");
         $(this).click(function(e){ e.preventDefault(); });

      } else {
         //console.log(href_value + " is not a pic");
      }
  });

});

我仍然难以接受我需要采用的结构来实现这个目标

Answer 1

您在回调中引用变量，而不是替换值。该值仅在$document(ready)回调中可见，因此在click事件触发时，该变量未定义。

您可以通过将变量的值放在回调字符串中来解决此问题，如下所示：

$(this).attr("onclick","window.open(this.href, 'mywindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=" + imgWidth + ",height=auto');");

这是您更新的codepen： http://codepen.io/anon/pen/EjGFB?editors=001

Answer 2

使用$("img")代替$("<img/>")。

jQuery onclick window.open变量宽度

2 个答案: