将javascript添加到类选择的Wordpress循环中

Question

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

• 我在打印页面（index.php）的循环中添加了div和svg。所有div都显示svg的大小，但空白。
• svg有一个由js文件定位的类。
• js文件被加载并且自行运行正常，但动画只出现在该类的第一个div中，相互打印的次数多达循环次数（实际页面上有多少帖子从那一类）。

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

我试图添加唯一的id到每个svg与post-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，您可以访问到当前的元素里面.each()与$(this)关键字。由于您使用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名称。