누락 된 항목을 계산할 수 없습니다.

jQuery UI를 사용하여 한 영역에서 다른 영역으로 항목을 이동하려고합니다. 상자가 왼쪽 영역에서 노란색 영역으로 떨어지면 남은 수와 진행률 막대가 표시됩니다.누락 된 항목을 계산할 수 없습니다.

어떤 이유에서든 첫 번째 끌기는 계산되지만 다음과 같이 계산되지는 않습니다 - 이유가 무엇입니까?

나는 length을 사용하여 계산하려고 : 그것은 응답으로 자바 스크립트를 기대하고 있지만, 페이지의 HTML 구조를 받고있다

$.ajax({ 
     url: "uxowBCc", 
     type: "POST", 
     data : "saveCard=33&idCard="+idCard+"&x="+x+"&y="+y, 
     dataType: "script", 
     success: function(data){ 
      eval(data); 
      } 
     });

$("#launchPad .card").length;

출처

2011-12-09 santa

먼저 위의 코드를 변경하는 다른 노드를 추가하는 것이다 내가 발견 한 것은 문법 오류 [이 오류 발생시 중단] 오류입니다. ''선언 앞에 문자 (공백)가 없는지 확인하십시오. – Jasper

$("#launchPad .card").length 모든 div.card 그래서 초기 수는 5입니다 td#launchPad 내부 그러나 당신이 div.card을 드래그 할 때 당신은 단지 요소의 위치를 변경 계산된다

이것은 data 변수에 저장되는 것입니다 여전히 #launchPad 안에 있으므로 로컬 변수 currentCount도 5입니다.

drop 이벤트에서 삭제 된 개체를 식별하는 클래스를 추가합니다.

이

$("#dropZone").bind("drop", function(event, ui) { 

    $(ui.draggable).addClass('dropped'); 
    var currentCount = $("#launchPad .card:not(.dropped)").length;

편집 : 나는 당신이 당신의 #launchPad의 다음 DOM이 의미

: jQuery를 당신의 div.card에 대한 다음

<td id="launchPad" class="ui-droppable">&nbsp; 
    <div id="CARD2674" class="card ui-draggable" style="position: relative; ">Task 2</div> 
    <div id="CARD2677" class="card ui-draggable" style="position: relative; ">Task 5</div> 
    <div id="CARD2675" class="card ui-draggable" style="position: relative; ">Task 3</div> 
    <div id="CARD2673" class="card ui-draggable" style="position: relative; ">Task 1</div> 
    <div id="CARD2676" class="card ui-draggable" style="position: relative; ">Task 4</div> 
</td>

을 #launchPad 내부에 항상이 같은 뭔가를 시도 할 수 있습니다 따라서 $("#launchPad .card").length은 항상 5를 반환합니다.

demo을 입력하십시오.

출처

2011-12-09 17:39:28 Galled

정말 미안합니다. 예, 코드가 잘 작동했습니다. 두 줄을 추가했지만 실수로 이전 줄을 남겼습니다. 그것을 제거하고 그것은 지금 위대한 작품. 사실 나는 코드를 줄 였지만 여전히 훌륭하게 작동합니다! – santa

이 코드가 문제입니다 생각합니다.

<!-- It seems like you have a couple lines of nothing up here that shouldn't be --> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 

<head> 

    <link rel="stylesheet" type="text/css" href="/css/style.css"> 

<link rel="stylesheet" type="text/css" href="/css/testStyle.css"> 

<link rel="STYLESHEET" type="text/css" href="/jq/UI/css/blitzer/uimin.css"> 

<script type="text/javascript" src="/jq/jquery-1.5.1.min.js"></script> 

<script type="text/javascript" src="/jq/jquery-ui.min.js"></script>console.info("id: 299");console.info("2674 299 43 53"); 

</body> 

</html>

출처

2011-12-09 17:38:03 Jasper

전에 간격을 고정했습니다. 알려 주셔서 감사합니다. 나는 그것이 내 DB에 저장된 좌표를 게시로 그 .ajax 함수를 유지해야한다고 생각합니다.나는 함수를 작성하지 않았지만 그것이 무엇인지를 확신합니다. 어쩌면 그것이 가지고있는 문제를 해결하기 위해 다시 써야 할 필요가있을 것입니다 ... – santa

#launchpad .card 항목을 드래그하면 다른 표 셀에서만 보이고 육체적으로 (DOM에 관한 한) 다른 표 셀에서는 보이지 않기 때문입니다. Notice line 227

var currentCount = $("#launchPad .card").length;

노드가 절대로 이동되지 않으므로이 값은 항상 5입니다. 전송이 성공했다고 가정하고이 숫자를 단순히 감소시켜 4 ~ 20 %를 제공하기 때문에 처음으로 작동합니다.

가능한 해결책은 단순히 이동 후 #launchpad에서 노드를 제거 #launchpad 외부 아니면 이동 노드 클래스를 추가하고

var currentCount = $("#launchPad .card:not(.moved)").length;

출처

2011-12-09 17:41:40

누락 된 항목을 계산할 수 없습니다.

답변

관련 문제