회전 목록 항목

Question

회전 목록 항목을 만들었지 만 목록을 제어하는 ​​두 개의 버튼을 소개하고자합니다. 첫 번째 단추는 기본적으로 목록 항목을 위쪽으로 이동시키고 두 번째 아래쪽은 목록 항목을 아래로 내릴 수 있도록 반대 방향으로 수행해야합니다.

이 내가 목록을 회전 사용하고있는 코드는 목록의 회전 방향을 제어하기 위해 노력하고있는 것 같습니다 here

감사

Answer 1

분할 버튼을 두 클래스 .up 및 .down을 제공하고 이벤트

working version on fiddle here 또는 here

$(".up").click(function(){ 
    $("ul li:first").slideUp('slow', function() { 
     $("ul li:last").after($(this)); 
    }).slideDown('slow'); 
}); 

$(".down").click(function(){ 
    $("ul li:last").slideUp('slow', function() { 
     $("ul li:first").before($(this)); 
    }).slideDown('slow'); 
}); 

Answer 2

이다. 그렇다면,이 시도 :

var direction = 'down'; 

    $(document).ready(function() { 
     var swap = function() { 
      if (direction == 'down') { 
       $("ul li:last").slideUp('slow', function() { 
        $(this).remove(); 
        $("ul").prepend($(this)); 
        $(this).slideDown('slow', function() { 
         swap(); 
        }); 
       }); 
      } 
      else { 
       $("ul li:first").slideDown('slow', function() { 
        $(this).remove(); 
        $("ul").append($(this)); 
        $(this).slideUp('slow', function() { 
         swap(); 
        }); 
       }); 
      } 
     } 
     swap(); 
    }); 

그런 다음 모든 버튼은 "방향"의 값을 변경하기 만하면, 예를 들어,

onclick="direction = 'up';"