如何将这个 jQuery 实现到 HTML 文档中？

Question

我正在尝试实现某人从另一篇完美运行的帖子中给我的这个片段，但我不知道插入它的正确方法。

我正在通过 Elementor 块构建器在 Wordpress 上工作，并且有一个自定义 HTML 小部件，我正在尝试将此代码插入其中。

我是一个刚开始使用 JavaScript 和 jQuery 的新手。 在 StackOverflow 上运行它效果很好，因为我可以将 HTML 放在 HTML 部分，将 jQuery 放在 JavaScript 部分，但显然我不能在 Wordpress 上运行。

任何帮助将非常感激！

 jQuery(function($) { $("#image1").click(function() { $(this).attr("src", "https://lowlifeclothing.co/wp-content/uploads/2020/11/Loop12D.gif"); var url = $(this).attr("data-click-href"); setTimeout(function() { window.location.href = url; }, 1000); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="https://lowlifeclothing.co/wp-content/uploads/2020/11/Loop12.gif" data-click-href="https://lowlifeclothing.co/shop/" id="image1">

Answer 1

JQuery 已经在 Wordpress 中排队。 您不需要包含 <script src=''...jquery'/>

您可以使用 Elementor 中的 HTML 块并添加您的 HTML 代码。 Javascript 代码需要包含在脚本标签中。

<script>
jQuery(function($) {
  $("#image1").click(function() {
    $(this).attr("src", "https://lowlifeclothing.co/wp-content/uploads/2020/11/Loop12D.gif");
    var url = $(this).attr("data-click-href");
    setTimeout(function() {
      window.location.href = url;
    }, 1000);
  });
});
</script>

<img src="https://lowlifeclothing.co/wp-content/uploads/2020/11/Loop12.gif" data-click-href="https://lowlifeclothing.co/shop/" id="image1">

现在，当您单击图像时，鹿会装死！

查看此图像以获取参考代码示例 -

https://askteammate.com/wp-content/uploads/2020/11/StackOverFlow-Question-64960881.png