javascript - 通过类选择将 javascript 添加到 Wordpress 循环

Question

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

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

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

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

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

//这是js代码(稍微 trim 了一下，因为路径很长，有很多随机数，但其他一切都在那里):

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 中，您可以通过附加 [0] 来访问 dom 对象。 this之后关键词。如果var dicon = Snap( jQuery(this) );不起作用，您可以尝试使用 var dicon = Snap( jQuery(this)[0] );

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

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