jQuery setAttribute 只影响第一个数字

Question

我正在制作一个简单的轮播动画。我想在单击按钮后旋转图像。问题是，jQuery 仅适用于第一个图形(正确更改 CSS 中的度数)。其余数字未受影响。我做错了什么？这是我的元素:

http://ww2.ii.uj.edu.pl/~kadluczs/PSI/

我尝试使用的代码在这里不起作用:

spinner = document.querySelector("#spinner figure");
if (!sign) { angle = angle + 60; } else { angle = angle - 60; }
spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); -moz-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg)");
setCurrent(current);

显然我想用 360/ImagesAmount 计算的数量替换“60”，但现在我放置了 6 并且我想将它移动 60 度。

请查看我的网站、代码并告诉我这里有什么问题。我需要在这里使用循环吗？

我在这里找到了这段代码，它在那里运行，没有任何循环: http://demosthenes.info/blog/690/Simple-CSS-3D-Carousel-Gallery

Answer 1

querySelector 方法只会返回匹配选择器的第一个元素，即使文档中有多个元素也是如此。您需要的是 querySelectorAll，它返回所有匹配项的 nodeList，因此您可以使用 Array.prototype.forEach 进行循环如 this MDN article 中所述.

但是，由于您提到您的元素包含 jQuery，因此使用它可以让您的生活更轻松(您提供的代码段似乎只使用常规 JavaScript):

spinner = $("#spinner figure");
if (!sign) { angle = angle + 60; } else { angle = angle - 60; }
spinner.attr("style","-webkit-transform: rotateY("+ angle +"deg); -moz-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg)");
setCurrent(current);

希望这对您有所帮助。