Question

这是我在这里的第一个问题，如果我做错了，请耐心等待。

我使用Storefront主题和WooCommerce的子主题运行wordpress网站。在我的一个产品上，我试图使用一个简单的javascript片段，通过有效地将图像更改为带有闪烁红点的gif，可以突出显示图片的不同区域。我了解到wordpress不允许我在编辑器中进行内联Javascript，因此我首先尝试了一个插件（TC Custom Javascript），然后当它没有工作时我尝试将我的脚本排入队列。

我的代码（我相信）是正确的，因为在Wordpress之外进行测试时，它可以完成我想要它做的事情。此外，插件和我排队的脚本文件都可以使用其他内容（例如，单击按钮时会显示警报）。我无法弄清楚为什么图像在WordPress中不会发生变化。

我的HTML代码如下： -

<img id="theImage" src="https://c-ko.co.uk/wp-content/uploads/2016/09/HP-230_white_1.jpg" width="300" height="300">
<input type="button" value="Click" id="button1">

我的Javascript代码是： -

var b1 = document.getElementById("button1");
b1.onclick = pictureChange;

function pictureChange() {
  "use strict";
  document.getElementById('theImage').src = "https://c-ko.co.uk/wp-content/uploads/2016/11/flashing_dot.gif";
}

我已经包含了实际的图片路径，希望能够解释我想要实现的目标 - 我知道这可能是一种粗暴的做事方式，但我确信你可以从我的代码中看出来＆＃ 39; m不是那么先进，如果它能起作用的话会很好！

我已发布该产品，但隐藏了以防万一有人需要在网站上看到它。链接为https://c-ko.co.uk/product/dual-channel-infrared-headphones/

（为了清楚起见，您需要向下滚动，直到看到“可调节头带”按钮。）

提前感谢您提供任何帮助。

Answer 1

您需要将所有内容都包装到onload侦听器中：

window.onload=()=>{
   button=document.getElementById("button1");
   button.onclick=()=>{
       //your gif code
        document.getElementById('theImage').src = "https://c-ko.co.uk/wp-content/uploads/2016/11/flashing_dot.gif";
    };
   };

如果窗口对象已完全加载，则文档对象才存在...使用chrome / firefox调试器检查脚本是否嵌入到您的站点中。在控制台中查找错误......

关于（）=＆gt; {}：这就是所谓的箭头功能。它的语法比普通函数短得多：

var name=(arguments)=>{code};

尝试使用Javascript在Wordpress网站上更改图像

1 个答案: