javascript - .click 重事件后函数不改变元素的位置

Question

这是我使用 jQuery 的第一步!所以请不要严格判断并帮助我) 我接下来要做的。我的 HTML 中有一些元素。

<div class="garden">
    <div class="point left">&#9668;</div>
        <div class="trees">
            <div id="apple">Apple</div>
            <div id="cherry">Cherry</div>
            <div id="pear">Pear</div>
            <div id="oak">Oak</div>
            <div id="fir">Fir</div>
        </div>
    <div class="point right">&#9658;</div>
</div>

每次单击“pointLeft”后，我都需要将元素的位置更改为左侧。并在每次点击“pointRight”后向右。当一个元素有最左边的位置，点击“pointLeft”这个元素被删除，一个副本被创建并出现在最右边的位置。例如。您单击“pointLeft”的图像。比“樱桃”代替“苹果”，“梨”代替“樱桃”，“橡”代替“梨”，“杉”代替“橡”。 “apple”被移除，“apple”的副本被创建并且它占据了“fir”的位置。等等。此外，我必须使用 .animate()。 所以一开始我尝试实现一个元素的动画(不使用.clone())。

$(document).ready(function() {
    var trees = ["#apple", "#cherry", "#pear", "#oak", "#fir"];
    var treePosition = [];
    for (var i = 0; i < trees.length; i++) {
        treePosition.push($(tree[i]).position());
    }

    function changePositionLeft() {
        if ($("#apple").position()) {
            $(trees[0]).animate(treePosition[4]);
        }

        else if ($("#apple").position() == treePosition[4]) {
            $("#apple").animate(treePosition[3]);
        }
    }

    $(".point.left").click(function() {
        changePositionLeft();
    });
});

当我第一次点击时，“apple”占据了“fir”的位置。但是，当我第二次单击“apple”时，不会动画到位置 treePosition[4]。 请帮助我理解为什么第二次点击后没有动画。并请推荐用于执行任务的工作代码。 谢谢!

Answer 1

通过查看此处的代码，我会说这段代码的计算结果始终为真:

if ($("#apple").position()) {

您正在测试此函数返回的值不是 FALSE，1,2,3,4,5 的计算结果不会为 false。我也不确定您要使用此功能做什么，但我不确定它会按照您的想法进行操作。它返回元素的定位作为对象内页面的坐标。对象返回值不会评估为 false。

当此 if 语句的计算结果为真时，您将运行此代码:

$(trees[0]).animate(treePosition[5]);

这个数组中的第一个元素仍然是“#apple”，因为据我所知，该数组是静态的，并且没有更新以反射(reflect)元素的新位置。您真正想要做的是将对元素的引用存储在 DOM 中，而不是将其 ID 的数组存储为字符串。

我稍微修改了你的代码，而不是使用数组来保存列表中元素的位置，我正在动画化每个元素到它们新位置的移动，然后将第一个元素移动到列表的末尾在 DOM 中列出。这样，每次单击箭头时，它都可以执行将第一个元素动画化到最后并将其他每个元素向前移动到前一个元素位置的 Action 。

这是新的 changePositionLeft 函数:

function changePositionLeft() {

    var trees = $('#trees');

    trees.children().each( function(index, child) {
        if (index == 0) {
            $(child).animate(trees.children().last().position());
        }
        else {
            $(child).animate(trees.children().eq(index - 1).position());
        }
    });

    trees.children().first().appendTo(trees);        
}

更新 fiddle :http://jsfiddle.net/8kkfw7mu/5/