Question

以下问题让我疯狂。我已经尝试过各种方法解决它，但我什么都没得到。

代码如下

var item = [];
function runCSStweaks() {
    var m=0;
    $('.jp-playlist li').each(function() {
        m++;
        var min1 = -1;
        var max1 = 1;
        var random1 = Math.floor(Math.random() * (max1 - min1 + 1)) + min1;
        item[m] = random1;
        $(this).css('-webkit-transform','rotate('+random1+'deg)')
    });
};
function actOnSongChange() {
    var m=0;
    $('.jp-playlist li').each(function() {
        m++;
        $(this).css('-webkit-transform','rotate('+item[m]+'deg)')
               .css('-webkit-transform','scale(1)')
    });
    var min3 = -1;
    var max3 = 1;
    var random3 = Math.floor(Math.random() * (max3 - min3 + 1)) + min3;
    $('.jp-playlist .jp-playlist-current').css('-webkit-transform','rotate('+random3+'deg)')
                                          .css('-webkit-transform','scale(1.05)')
});

我会带你们走过去。基本上，我正在使用jPlayer构建播放列表。我已经设置好了，当jPlayer完成构建列表时，将调用runCSStweaks()代码，以便为每个项目应用一些小的随机CSS旋转。（这是我之前遇到的一个问题;一旦列表全部完成就无法进行这些CSS调整;所以我必须通过在jPlayer列表构建过程结束时调用此变量来解决它。）到目前为止，它完美无缺。所有项目都按预期随机旋转。

然后，想法是，当每首歌曲完成播放并继续播放下一首歌曲时，将调用第二个脚本actOnSongChange()。该脚本基本上应该对当前播放的项目应用另一个随机旋转和CSS缩放，同时将所有先前播放的项目恢复为原始音阶。

好像很简单，但我遇到的问题是，我不能将CSS缩放设置回1而不重置原始的CSS旋转。我想这是因为他们都通过CSS转换工作。因此，想到的唯一解决方案是“保存”所有原始旋转，以便在比例恢复为1时再调用它们。

为了做到这一点，我在第一个脚本运行时创建一个每个随机旋转量的数组，并在第二个脚本中调用每个单独的数组条目。

这是我撞墙了。我已经尝试了一切，并得出结论，第一个脚本根本不构建数组。如果我在第二个脚本中放置一个console.log()并调用item让它转储数组的内容，我得到一个空数组。如果我尝试在第一个脚本中放置一个console.log()来查看发生了什么，它甚至都不打印出来。出于同样的原因，我被迫将var item = []行放在runCSStweaks()之外（否则，我通过console.log(item)得到了这个错误：“Uncaught ReferenceError：item not defined”）。

所以，显而易见的是，第一个函数runCSStweaks()，CSS调整没问题，但就是这样。我放在里面的任何其他东西都没有运行，我不知道为什么。

我可能错过了什么吗？我的编码在哪里出错？或者它与jQuery调用和执行事物的顺序有关吗？

我会继续尝试在早上完成此代码。但就目前而言，我的大脑即将建立自己的篝火。

Answer 1

您不能将Scaling + Rotating应用于同一元素。

这不是CSS3的工作原理。尝试应用两个不同的元素。一个用于缩放，另一个用于旋转。

希望有所帮助

修改

这个可以在同一个元素中完成。 对不起。

但

如果你这样做：

<强> CSS

/* WRONG!! */ span { -webkit-transform: sacle(1.05); -webkit-transform: rotate(10deg); }
显然旋转将覆盖缩放。你应该做的是：

<强> JS：

.css('-webkit-transform','scale('+randomScaling+') rotate('+randomRotation+')');

Answer 2

很难看出您的runCSStweaks()功能究竟出错了什么，因为我们无法看到您的HTML或您是如何调用它的。您可以在my working demo中看到代码正常工作，并在没有其他错误的情况下填充item数组：

var item = [];

function runCSStweaks() {
    $('.jp-playlist li').each(function() {
        var min = -90;
        var max = 90;
        var random = Math.floor(Math.random() * (max - min + 1)) + min;
        item.push(random);
        $(this).css('-webkit-transform','rotate('+ random +'deg)')
    });
};

runCSStweaks();

工作演示：http://jsfiddle.net/jfriend00/kk2U9/显示item数组完全填充了随机数。

我夸大了轮换只是为了视觉澄清。您可以想到的自己的代码/ HTML的可能性是：

选择器'.jp-playlist li'并不匹配任何内容，因为它不是HTML的正确选择器。
您在加载页面之前调用此代码，因此找不到.jp-playlist。
您在创建.jp-playlist和li元素之前调用此代码（如果它们是在代码中创建的，或者在页面加载后动态加载）。
您感到困惑，因为您的代码中没有item[0]元素，因为您正在填充该数组（这就是我在代码中使用.push()的原因）。
您不是在呼叫runCSStweaks()。

Answer 3

好的，所以这里的基本问题是为什么第一个函数runCSStweaks()如果执行CSS调整就没有创建数组呢？

答案，很多我的尴尬，哦，我现在不觉得这个大傻瓜，很简单：

我从未调用过函数runCSStweaks()！

最初，我调用了runCSStweaks()右边的jPlayer JS完成构建播放列表并部署它。正如我在上面的问题描述中所说，我一直在深夜工作，并且由于一些奇怪的，神秘的原因，在某些时候我失败的大脑决定将函数本身插入到jPlayer JS中，而不仅仅是调用它从那里。（我只能猜测原来的电话没有按计划进行。）

所以，从来没有删除原来的runCSStweaks()函数，毫无疑问因为我认为我可能必须回到调用它以保持原始的JS整洁，我最终忘记了我已将整个函数放入那里。总而言之，runCSStweaks()函数没有被调用，调整CSS的函数隐藏在原始JS中，我愚蠢地在runCSStweaks()中添加了数组构建器等。并问自己为什么，为什么，这不起作用？！

所以，对不起。但非常感谢你们的帮助！我想我们可能一直试图在这里找到问题，但无济于事，因为没有问题;至少不是功能，而是我的笨拙。不过，我必须说，在你的回答和评论中，我至少学到了两三个非常重要的信息，这些信息将阻止我在将来犯其他错误并将其发布在这里！再次感谢！

jQuery构建的数组不能在正在执行的第一个函数中工作

3 个答案: