时间戳

首页 > 解决方案 > 如何将此 jQuery 实现到 HTML 文档中？

javascript - 如何将此 jQuery 实现到 HTML 文档中？

问题描述

我正在尝试实现有人从另一篇文章中给我的这个片段，它完美地工作，但我不知道插入它的正确方法。

我正在通过 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">

标签： javascripthtmljquerywordpresselementor

解决方案

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

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

<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

推荐阅读