부분적으로 jQuery를 사용하여 목록을 역전합니다.

Question

나는 그것에 10 개의 구슬이있는 주판을 만들고 있습니다. 구슬을 클릭하면 그 구슬이 나오기 전에 모든 구슬이 주판에 놓여지고 나머지 구슬은 주판의 오른쪽으로 옮겨집니다.

목록 :

<ul class="abacus"> 
    <li class="bead">1</li> 
    <li class="bead">2</li> 
    <li class="bead">3</li> 
    <li class="bead">4</li> 
    <li class="bead">5</li> 
    <li class="bead">6</li> 
    <li class="bead selected">7</li> 
    <li class="bead off">8</li> 
    <li class="bead off">9</li> 
    <li class="bead off">10</li> 
</ul> 

CSS의 : 구슬이 오른쪽으로 부동 '오프', 그들의 순서는 되돌릴 수있다 (그렇지 않으면 주판의 모양 때문에

li.bead { 
    cursor: pointer; 
    width: 28px; 
    height: 32px; 
    float: left; 
} 

/* just for visuals: */ 
li.bead.selected { 
    background-image: url('../images/smartie-selected.png'); 
} 

li.bead.off { 
    float: right; 
    background-image: url('../images/smartie-unselect.png'); 
} 

: [1] [2] [3] [4] [5] [6] [7] -------- [10] [9] [8]). 나는이를 위해 사용하고

JQuery와는 다음과 같습니다

$("li.bead").click(function() { 
    // remove the 'selected' class of the previously selected bead (just for visuals): 
    $("li.bead.selected").removeClass("selected"); 

    // save the number of the bead was selected: 
    var no = Number($(this).html()); 

    // add the 'selected' class to the clicked bead (just for visuals): 
    $(this).addClass("selected"); 

    // add the 'off' class to all the 'higher' beads than the selected one 
    // and removing that class for all he lower beads: 
    $(this).parent().children().each(function() { 
     if(Number($(this).html()) > no) { 
      $(this).addClass('off'); 
     } else { 
      $(this).removeClass('off'); 
     } 
    }); 

    // reverse all beads: 
    $(this).parent().children().each(function(i, li) { 
     $(this).parent().prepend(li); 
    });    
}); 

는 그래서, jQuery를의 마지막 단계는 정확하게는 'off' 구슬뿐만 아니라 다른 구슬을 반대로 배열 모든 구슬을, 반전, 주판을 예를 들면 다음과 같이 만든다 :

[4] [3] [2] [1] ------------ [5] [6] [7] 9] [10]

첫 번째 구슬을 뒤집을 때 추가해야 할 것은 무엇입니까?

Answer 1

나는 플로트를 피하려고한다. 먼저 선택한 요소에 마진 오른쪽 값을 추가합니다. 이런 식으로 뭔가 ...

$("li.bead").click(function() { 
    // remove the 'selected' class of the previously selected bead (just for visuals): 
    $("li.bead.selected").removeClass("selected"); 
    $("li.bead.off").removeClass("off"); 

    // save the number of the bead was selected: 
    var no = Number($(this).html()); 

    // add the 'selected' class to the clicked bead (just for visuals): 
    $(this).addClass("selected"); 

    // add the 'off' class to all the 'higher' beads than the selected one 
    $(this).nextAll().addClass("off");   
}); 

및 CSS ... 동적으로 오른쪽 여백을 필요로하는 경우

li.bead { 
    cursor: pointer; 
    width: 28px; 
    height: 32px; 
    float: left; 
} 

/* just for visuals: */ 
li.bead.selected { 
    margin-right:100px;/*change this to suit your design*/ 
    background-image: url('../images/smartie-selected.png'); 
} 

li.bead.off { 
    background-image: url('../images/smartie-unselect.png'); 
} 

Here is a working example

당신은 항상 자바 스크립트를 계산에 추가 할 수 있습니다 선택한 요소 같은 요소 ...

var parent = $(this).parent(); 
var margin = parent .width() - (parent.children().length * $(this).width()); 
parent.children().css("margin-right", "0px");//clear other margins 
$(this).css("margin-right", margin + "px");//set this margin 

Answer 2

예를 들어, 나는 주판을 사용 해본 적이 없다. (나는 그리 오래되지 않았다!) 나는 문제가 어디에 있는지 정말로 알 수 없다. 그러나 내가 말하고 싶지만 추측에 난 당신이해야 할 일이라고 생각하는 것을 당신이 ... 후 또는 선택 비드 전에 만 구슬을 명시 할 수 있습니다으로 jQuery의

nextAll() 
prevAll() 

방법을 살펴 있나요?

Answer 3

어때요?

$(this).parent().children().each(function() { 
     if(Number($(this).html()) > no) { 
      $(this).addClass('off'); 
      $(this).parent().prepend(li); 

     } else { 
      $(this).removeClass('off'); 
      $(this).parent().append(li); 

     } 
    });