时间戳

首页 > 解决方案 > 与我的实时站点集成时，隐藏和显示 div 的 JQuery 代码不起作用

javascript - 与我的实时站点集成时，隐藏和显示 div 的 JQuery 代码不起作用

问题描述

我不确定我在这里做错了什么。在这里和 JSFiddle 上都可以正常工作，但是当我尝试将代码集成到我的 WooCommerce 网站时，它什么也没做。

我的代码相当简单，它只是检查图像的尺寸并根据检查结果显示/隐藏带有适当消息的 div。

这里是现场直播。

var _URL = window.URL || window.webkitURL;

$("#filecheck").change(function() {
  var file, img;

  if ((file = this.files[0])) {
    img = new Image();

    img.onload = function() {
      if (this.width < 1800 && this.height < 1800) {
        $('.pass').css('display', 'none');
		$('.fail').css('display', 'block');
      }
      
      else {
        $('.pass').css('display', 'block');
		$('.fail').css('display', 'none');
      }
    };
    img.src = _URL.createObjectURL(file);
  }
});
.pass {
  display: none;
}

.fail {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="filecheck" />
<div class="pass">
image quality good
</div>

<div class="fail">
image quality too low
</div>

谁能看到我在这里做错了什么？这可能是非常基本的东西，但我对此很陌生。

标签： javascriptjqueryhtmlcss

解决方案

似乎您可能在对象存在于 DOM 之前附加了处理程序。如果我在加载后将您的脚本注入页面（即，将其复制并粘贴到 JavaScript 控制台中），那么它似乎可以工作。

您可以尝试三件事：

您可以尝试document先将侦听器附加到始终存在的位置，然后使用#filecheck选择器：

$(document).on('change', '#filecheck', function () {
     // Your code here
});

这可能不是最好的性能，但可以解决问题。

您还可以尝试将代码包装在ready()处理程序中：

$(document).ready(function() {
    // Your event handler code
});

您也可以尝试将文件处理脚本移动到文档正文的末尾，看看是否可行。

推荐阅读