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”的图像。比“樱桃”取“苹果”的位置，“梨”取“樱桃”的位置，“橡树”取“梨”的位置，“杉木”取“橡树”的位置。删除“苹果”，创建“苹果”的副本，它取“冷杉”的位置。等等。此外，我必须使用.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”的位置。但是当我点击第二次“苹果”时，不要动画到位置treePosition [4]。请帮助我理解为什么第二次点击后没有动画。请推荐用于执行任务的工作代码。谢谢！

Answer 1

通过查看此处的代码，我会说这段代码将始终评估为true：

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

您正在测试从此函数返回的值不为FALSE，1,2,3,4,5将不会计算为false。我不确定你要用这个功能做什么，但我不确定它是否符合你的想法。它返回元素的位置作为对象内页面的坐标。对象返回值不会计算为false。

当此if语句评估为true时，您将运行此代码：

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

这个数组中的第一个元素仍然是'#apple'，因为数组是我看不到的数据，并且没有更新以反映元素的新位置。你真正想要做的是存储对DOM中元素的引用，而不是它们的ID作为字符串的数组。

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

这是新的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);        
}

更新了小提琴：http://jsfiddle.net/8kkfw7mu/5/

在.click re-event之后，函数不会改变元素的位置

1 个答案: