使用类选择将 javascript 添加到 Wordpress 循环

Question

我想将类别图标添加到 Wordpress 页面，每个图标都使用 snap.svg 进行动画处理。

• 我在打印页面 (index.php) 的循环中添加了 div 和 svg。所有 div 都以正确的 svg 大小出现，但为空白。
• svg 有一个由 js 文件定位的类。
• js 文件已加载并自行正常工作，但动画仅出现在该类的第一个 div 中，相互打印的次数与循环计算的次数相同（实际页面上有多少帖子来自该类别）。

我添加了“each()”和 js 的开头，但没有将动画分配到正确的位置。我还尝试为 svg 位置添加双“each()”，并将 snap 对象也添加到 svg，但这也不起作用。

我尝试使用 post-id 为每个 svg 添加唯一 id，但我无法将循环内部的 id 传递给 js 文件。我在这里和其他地方找到了许多可能的解决方案，但没有一个能适应，因为我的 php 和 js 太差了。

如果你知道我应该如何解决这个问题，请回答我。谢谢！

//这是js代码（稍微修剪一下，因为路径很长，随机数很多，但其他的都在那里）：

jQuery(document).ready(function(){ 

jQuery(".d-icon").each(function() {

var dicon = Snap(".d-icon");

var dfirepath = dicon.path("M250 377 C"+ ......+ z").attr({ id: "dfirepath", class: "dfire", fill: "none", }); 

function animpath(){  dfirepath.animate({ 'd':"M250 377 C"+(Math.floor(Math.random() * 20 + 271))+ .....+ z" }, 200, mina.linear);};

function setIntervalX(callback, delay, repetitions, complete) { var x = 0; var intervalID = window.setInterval(function () { callback(); if (++x === repetitions) { window.clearInterval(intervalID);  complete();} }, delay); }

var dman = dicon.path("m136 ..... 0z").attr({ id: "dman", class:"dman", fill: "#222", transform: "r70",  }); 

var dslip = dicon.path("m307 ..... 0z").attr({ id: "dslip", class:"dslip", fill: "#196ff1", transform:"s0 0"});

var dani1 = function() { dslip.animate({ transform: "s1 1"}, 500, dani2); }
var dani2 = function() { dman.animate({ transform: 'r0  ' + dman.getBBox().cx + ' ' + dman.getBBox(0).cy, opacity:"1" }, 500, dani3 ); }
var dani3 = function() { dslip.animate({ transform: "s0 0"}, 300); dman.animate({ transform: "s0 0"}, 300, dani4); }
var dani4 = function() { dfirepath.animate({fill: "#d62a2a"}, 30, dani5); } 
var dani5 = function() { setIntervalX(animpath, 200, 10, dani6); }
var dani6 = function() { dfirepath.animate({fill: "#fff"}, 30); dman.animate({ transform: "s1 1"}, 100); } 

dani1();  });  });

Answer 1

我猜你的错误在这里：

var dicon = Snap(".d-icon");

您将查询选择器传递给 Snap 构造函数，这意味着 Snap 总是尝试获取该类的第一个 DOM 元素，因此您在错误的位置获取动画。

您可以通过两种方式纠正它：

1. 在构造函数内部声明宽高，例如var dicon = Snap(800, 600);

2. 由于您使用的是 jQuery，您可以使用 $(this) 关键字访问 .each() 中的当前元素。由于您使用的是jQuery 而不是美元，因此您可以使用jQuery(this)。

请记住，这是一个 jQuery 对象，可能 Snap 需要一个 DOM 对象。在 jQuery 中，您可以通过在 this 关键字后附加 [0] 来访问 dom 对象。如果var dicon = Snap( jQuery(this) ); 不起作用，您可以尝试使用var dicon = Snap( jQuery(this)[0] );

此外，您的代码中有多个.attr({id : '...', 。我假设您正在尝试将不唯一的 ID 关联到路径。这些应该是相对安全的，因为它们位于 SVG 元素中，而且我看不到您将这些 ID 用于将来的选择。

但是如果您以后必须选择这些，我建议您在这些后面附加一个数值，这样您就不会有冲突的 ID 名称。