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

Question

我想将类别图标添加到 Wordpress 页面，每个图标都带有 snap.svg 动画。

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

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

我尝试使用 post-id 为每个 svg 添加唯一的 id，但我无法将 id 从循环内部传递到 js 文件。我经历了在这里和其他地方找到的许多可能的解决方案，但是 none 是适应性强的，因为我的 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");

您正在将查询 selector 传递给 Snap 构造函数，这意味着 Snap 总是尝试获取具有 class 的第一个 DOM 元素，因此您得到的原因动画放错地方了。

您可以通过两种方式更正：

在构造函数中声明宽度和高度，例如var dicon = Snap(800, 600);
由于您使用的是 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 用于未来 selection.

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

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

Add javascript to Wordpress loop with class selection

javascript

wordpress

svg

snap.svg