2010-04-05 3 views
1

Jquery.I을 사용하여 테이블을 정렬하는 코드가 있습니다. 전환 기능을 사용하여 '오름차순'과 '내림차순'을 전환 할 수 있습니다. 헤더 테이블을 클릭하면 내용을 정렬해야합니다.Jquery 토글 함수

그러나 버그가있다 :

한번 클릭, 그것은 정렬, 내가 다시 클릭하면 다음, 필요한이 생겼다 것도 일종의 또 다시 (두 번째)을 클릭하지 두 번째 기능을 실행합니다.

토글은 두 번이 아닌 한 번의 클릭으로 기능을 전환해야합니다. 맞습니까? 첫 번째와 두 번째 클릭 사이에 더 이상 기다리는 경우 예상대로 일이 행동 것처럼 소리, 귀하의 게시물에서

firstRow.toggle(function() { 
     $(this).find("th:first").removeClass("ascendFirst").addClass("descendFirst"); 
     $(this).find("th:not(first)").removeClass("ascend").addClass("descend"); 

     sorted = $.makeArray($("td:eq(0)", "tr")).sort().reverse(); 
     sorted2 = $.makeArray($("td:eq(1)", "tr")).sort().reverse(); 
     sorted3 = $.makeArray($("td:eq(2)", "tr")).sort().reverse(); 

     for (var i = 0; i < sorted.length; i++) { 
      $("td", "tr:eq(" + (i + 1) + ")").remove(); 
      $("tr:eq(" + (i + 1) + ")").append($("<td></td>").text($(sorted[i]).text())); 


      $("tr:eq(" + (i + 1) + ")").append($("<td></td>").text($(sorted2[i]).text())); 


      $("tr:eq(" + (i + 1) + ")").append($("<td></td>").text($(sorted3[i]).text())); 

     } 
    }, function() { 
     $(this).find("th:first").removeClass("descendFirst").addClass("ascendFirst"); 
     $(this).find("th:not(first)").removeClass("descend").addClass("ascend"); 

     sorted = $.makeArray($("td:eq(0)", "tr")).sort(); 
     sorted2 = $.makeArray($("td:eq(1)", "tr")).sort(); 
     sorted3 = $.makeArray($("td:eq(2)", "tr")).sort(); 

     for (var i = 0; i < sorted.length; i++) { 
      $("td", "tr:eq(" + (i + 1) + ")").remove(); 
      $("tr:eq(" + (i + 1) + ")").append($("<td></td>").text($(sorted[i]).text())); 


      $("tr:eq(" + (i + 1) + ")").append($("<td></td>").text($(sorted2[i]).text())); 


      $("tr:eq(" + (i + 1) + ")").append($("<td></td>").text($(sorted3[i]).text())); 

     } 
    }); 
+2

자신의 버전을 롤링하는 대신 tablesorter를 사용하지 않는 이유는 무엇입니까? http://tablesorter.com/ – Powerlord

+0

원인, 직접 정렬하는 법을 배워야합니다. – ozsenegal

+0

아주 좋았습니다. 다른 플러그인을 향해 나를 가리키는 사람들이 지겨워진다. 아무도 그들이 어떻게 일했는지 묻지 않고 다른 사람들의 작품을 사용하여 무엇인가를 배웠습니다. – dclowd9901

답변

1

토글 코드가 정상적으로 보입니다. 이벤트를 실행하기 위해 두 번째 클릭이 필요한 상황이 발생했을 때 선택기 (이 경우 firstRow)에 두 번 토글을 적용한 경우가 있습니다. 또는 둘 이상의 jQuery 객체가 있습니다. 당신이 두 번 적용하거나이 FIRSTROW 선택 독립적으로 작동하는지 테스트하기 위해 간단한 사업부에 코드를 연결하지 않은

확인합니다. 예 :

$("div.testclass").toggle(function() { 
    // do this 
    } 
}, function() { 
    // undo this 
    } 
});​ 

HTML도 필요합니다.

0

: 여기

는 코드입니다. 두 번째 클릭 기능은 너무 빨리 수행하면 두 번째 클릭을 먹을 수 있습니다. 이 경우이 핸들러를 클릭 및 두 번 클릭 이벤트에 바인딩 한 다음 동일한 이벤트로 처리하십시오.