javascript - 为什么我将 JQuery/CSS 代码导入到我的 Wordpress 网站时它不起作用?

标签 javascript jquery html css wordpress

在 JSFiddle 上编辑代码时,一切正常,但当我将其导入我的实时 Wordpress 网站时,它根本没有做任何事情。我已经三重检查我没有打错字或类似的东西,但真的没有什么让我印象深刻的。非常沮丧,所以我希望有人能提供帮助。

提前致谢:)

现场: https://victoryposters.com/product/stadium/

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

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

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

    img.onload = function() {
      //green
      if (this.width < 1800 && this.height < 1800) {
        $('.fail').css('display', 'block');
        $('.pass').css('display', 'none');
      } 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/2.2.4/jquery.min.js"></script>
<input type="file" id="filecheck" />

<div class="fail">File quality is very low we can not accept this image</div>
<div class="pass">file quality is high</div>

最佳答案

问题是您将 JavaScript 放在了 <head> 中标签。这意味着它会在遇到您的 DOM(您尝试查询的 HTML 元素)之前尝试执行您的代码。 所以它试图在那个时刻不存在的东西上执行它。 要么将您的整个代码包装到

$(document).ready(function() { … })

或者更好,把它放在收盘前<body>标签。 无论如何,我也建议将其移动到外部文件

关于javascript - 为什么我将 JQuery/CSS 代码导入到我的 Wordpress 网站时它不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55294927/

相关文章:

javascript - “ sanitizer ”用户提交的 Javascript - 所以它仍然有效!

javascript - 在 Javascript 中检查所有复选框第二次不起作用

javascript - 使用悬停图像效果的最有效方式

html - 在 <body> 中使用 HTML5+Microdata 的 &lt;meta&gt; 标签

javascript - AJAX 函数表现怪异

javascript - 检查字符串中是否存在多个字符串

javascript - `Promise.all`是否受到浏览器施加的并发连接限制?

JavaScript 到 jquery

javascript - 滚动到一个链接并激活它

html - 我如何在 css 中设置打印 html 页面的样式