CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Antin
Antin

Reputation: 85

Function does not change the position of the element after .click re-event

It is my first step in jQuery! So please do not judge strictly and help me) I have to do next. There are some elements in my 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>

I need to change the position of the elements to the left after each clicking "pointLeft". And to the right after each clicking "pointRight". When an item has a position of leftmost and click "pointLeft" this item is deleted, a copy is created and appears on the rightmost position. For example. Image that You clicked on "pointLeft". Than "cherry" takes the position of "apple", "pear" takes the position of "cherry", "oak" takes the position of "pear", "fir" take the position of "oak". The "apple" is removed, copy of "apple" is created and its takes the position of "fir". And so on. Besides I have to use .animate(). So at first I try to realize animation of one element (without usin .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();
    });
});

When I click at first, "apple" takes the position of "fir". But when I click second time "apple" don't animate to the position treePosition[4]. Please help me to understand why there is no animation after the second click. And please recommend working code for the implementation of tasks. Thanks!

Upvotes: 0

Views: 314

Answers (1)

Stuart Miller
Stuart Miller

Reputation: 657

From looking at the code you have here, I would say that this code will always evaluate to true:

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

You are testing that the value returned from this function is not FALSE, 1,2,3,4,5 will not evaluate to false. I'm not sure what you are trying to do with this function either but I'm not sure it does what you think it does. It returns the positioning of the element as coordinates of the page inside an object. The object return value will not evaluate as false.

When this if statement evaluate to true, you are then running this code:

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

The first element in this array is still '#apple', as the array is static from what I can see and is not updated to reflect the new positions of the elements. What you really want to be doing is storing references to the elements in the DOM, not an array of their ID's as strings.

I have altered your code somewhat, instead of using an array to hold the positions of the elements in the list I am animating the movement of each of the elements to their new position and then moving the first element to the end of the list in the DOM. This way each time the arrow is clicked it can just perform the action of animating the first item to the end and moving each of the others forward into the previous elements position.

This is the new changePositionLeft function:

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);        
}

Updated fiddle: http://jsfiddle.net/8kkfw7mu/5/

Upvotes: 1

Related Questions