.click re-event 후 함수의 위치가 변경되지 않습니다.

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"이 위치 treePosition [4]에 애니메이션을 적용하지 않습니다. 두 번째 클릭 후 왜 애니메이션이 없는지 이해해주십시오. 그리고 작업 구현을위한 작업 코드를 권장하십시오. 감사합니다. 당신이 여기있는 코드를 찾고에서

Answer 1

, 나는이 코드는 항상 true로 평가 것이라고 말할 것입니다 :이 함수에서 반환 값이 1, 2, FALSE 아니라고 테스트

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

, 3,4,5는 거짓으로 평가되지 않습니다. 나는이 기능으로 무엇을하려고하는지 잘 모르겠다. 그러나 나는 그것이 당신이 생각하는 것을 잘 모르겠다. 요소 내부의 페이지 좌표로 요소의 위치를 ​​반환합니다. 객체 반환 값은 false로 평가되지 않습니다. 배열은 내가 볼 수있는 정적과 같은

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

이 배열의 첫 번째 요소는 '#apple'여전히이 if 문이 true로 평가되면

, 당신은 다음이 코드를 실행하는 요소의 새 위치를 반영하도록 업데이트되지 않습니다. 당신이 정말로하고 싶은 것은 문자열을 ID로 배열하는 것이 아니라 DOM에있는 요소에 대한 참조를 저장하는 것입니다.

배열을 사용하여 목록의 요소 위치를 유지하는 대신 코드를 변경했습니다. 요소의 각 위치를 새 위치로 움직이게하고 첫 번째 요소를 끝으로 이동시킵니다. 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/