jquery 필터가 올바른 결과를 제공하지 않습니다.

Question

빈 sendStatus[]이 있습니다. 기본적으로 나는 배열에 사용자가 확인란을 클릭하는 동안 존재 여부를 값을 확인입니다. 그게 없다면 나는 사용자가 체크 박스를 다시 클릭 할 경우 "add + this.value"값을 더하는 것 뿐이다.

sendStatus[]에 "add + this.value"가 있는지 검사 할 것이다. 나는 그것을 제거하고 새 값을 "remove + this.value"로 추가하므로 각 체크 박스에서 "add + this.value"또는 "remove + this.value"값만 가져옵니다.

내가이 기능을 사용하여이 작업을 수행하지만 작동합니다 :

var sendStatus = []; 

var clearValues = function(newVal){ 
      console.log("calling",newVal); 

     } 

     $("form").on("click", ":checkbox", function(e){ 

      var el = $(this),parentClass = $(this).parent().hasClass("green"),label = $(this).parent(); 

      if(!parentClass){ 
       label.addClass("green"); 

       sendStatus = $.grep(sendStatus, function(value) { 
        return value != "remove" + el.val(); 
       }); 

       if ($.inArray("add" + el.val(), sendStatus) === -1) { 
        sendStatus.push("add" + el.val()); 
       } 

      }else{ 
       label.toggleClass("red"); 

       sendStatus = $.grep(sendStatus, function(value) { 
        return value != "add" + el.val(); 
       }); 

       if ($.inArray("remove" + el.val(), sendStatus) === -1){ 
        sendStatus.push("remove" + el.val()); 
       } 
      } 
     console.log(sendStatus); 

     }) 

사람이 사전에 .. 덕분에 내 기능을 단순화하고 내가 직면하고있는 무슨 문제를 강조 표시합니다.

Answer 1

나는이 문제가 체크 박스 선택자 내에 있음을 확신한다. console.log가 실행 중입니까? 어쨌든 일부 과제는 코드를 더 읽기 쉽고 오류 가능성이 적을 것입니다. 이 예제를 시도해 볼 수 있습니다 http://jsfiddle.net/AyjnW/4/ 제대로 작동합니다.

$("form").on("click",'input[type="checkbox"]', function(e){ 

      var el = $(this), 
       label = el.parent(), 
       hasParentClass = label.hasClass("green"), 
       elementValue = el.val(), 
       removeElementValue = "remove"+ elementValue, 
       addElementValue = "add"+ elementValue ; 
      if(! hasParentClass){ 
       label.removeClass("red").addClass("green"); 

       sendStatus = $.grep(sendStatus, function(value) { 
        return value != removeElementValue ; 
       }); 

       if ($.inArray(addElementValue , sendStatus) === -1) { 
        sendStatus.push(addElementValue); 
       } 

      }else{ 
       label.removeClass("green").addClass("red"); 

       sendStatus = $.grep(sendStatus, function(value) { 
        return value != addElementValue ; 
       }); 

       if ($.inArray(removeElementValue , sendStatus) === -1){ 
        sendStatus.push(removeElementValue); 
       } 
      } 
      console.log(sendStatus); 

     }) ; 

Answer 2

.on() 이벤트 핸들러, 사용에 대한주의 : 정적 노드 선택을 제공해야하는 selector1 섹션에서

$("selector1").on("click",'selector2', function(e) {... 

, 느릅 나무는 웹 서버에서 오는 또는이 (자바 스크립트 런타임에 변경되지 느릅 나무 html 문서에서 정적으로 사용) 선택기를 dinamyc 부분에 가장 가까운 곳에 씁니다. 예 : $("form table > tbody > tr") selector2는 선택의 dinamyc 부분이며,이 노드는 자바 스크립트 런타임에서 생성되며 DOM에 없습니다. 체크 박스 또는 td-s (여기에 dinamycally 생성 된 경우)를 적어주십시오.

$("form table > tbody > tr").on("click",'td > input[type="checkbox"]', function(e){ ...