2011-11-16 4 views
0

첫 번째 확인란을 변경하면 theSame을 변경하려고하지만 if(theSame == 1); 에 변경되지 않지만 alert("b"+theSame)으로 변경됩니다. 어떻게 처리할까요? JavaScript의 범위

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      var theSame = 1; 
      $("input[name='thesame']").change(function(){ 
       theSame = $(this).is(":checked") ? 1 : 0; 
       alert("a"+theSame); 
      }); 
      if(theSame == 1){ 
       $(".check_list input").change(function(){ 
        alert("b"+theSame); 
       }); 
      } 
     }); 
    </script> 
</head> 
<body> 
<input type="checkbox" name="thesame">same 
<br> 
<div class="check_list"> 
    <input type="checkbox" name="son">ppp 
    <input type="checkbox" name="son">ppp 
    <input type="checkbox" name="son">ppp 
</div> 
</body> 
</html> 

내가 달성하고자이 무엇인지, 감사합니다 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $("input[name='thesame']").change(function(){ 
     var theSame = this.checked ? 1 : 0; 
     show(theSame) 
     }); 
     function show(i){ 
      if(i == 1){ 
      $(".check_list input").change(function(){ 
      var inputName = $(this).attr("name"); 
      $("input[name=" + inputName + "]").attr("checked",this.checked) 
      }); 
     }else{ 
      $(".check_list input").unbind("change") 
      } 
     } 
}); 
    </script> 
</head> 
<body> 
<input type="checkbox" name="thesame" class="check-all">same 
<br> 
<div class="check_list"> 
    <input type="checkbox" name="son">ppp 
    <input type="checkbox" name="sister">ppp 
    <input type="checkbox" name="dog">ppp 
</div> 
<hr> 
<div class="check_list"> 
    <input type="checkbox" name="son">ppp 
    <input type="checkbox" name="sister">ppp 
    <input type="checkbox" name="dog">ppp 
</div> 
<hr> 
<div class="check_list"> 
    <input type="checkbox" name="son">ppp 
    <input type="checkbox" name="sister">ppp 
    <input type="checkbox" name="dog">ppp 
</div> 

</body> 
</html> 
+0

사이드 노트 -'$ (this) .is (": checked")'를 사용하지 마십시오. 'this.checked'를 사용할 수 있습니다. * this * check *는 * 많이 * 더 빨리 수행하고 * 읽기 쉽습니다. [사용할 수있는 멋진 트릭] (http://stackoverflow.com/questions/61088/hidden-features-of-javascript/2243631#2243631) 여기에'this.checked? '대신'+ this.checked'가 있습니다. 1 : 0'이다. –

+0

당신은 무엇을 기대하고 있습니까? 'theSame'을 1로 설정하면'if (theSame == 1) {'내부의 코드는 항상 실행됩니다. –

답변

2

이 정말 범위의 문제가 아니라 비동기 더. if 문은 항상 1의 값을가집니다 실행할 때 당신이 볼 수 있듯이이 코드가 이미 된 후 값이 나중에까지 변경되지 않기 때문에, 그래서

$(document).ready(function(){ 
    // Define function-scope variable `theSame`, assign it a value of `1` 
    var theSame = 1; 

    // Bind a `change` event handler to an element, this function will run later! 
    $("input[name='thesame']").change(function(){ 
     theSame = +this.checked; 
     alert("a"+theSame); 
    }); 

    // At this point, `theSame` has not changed from its original value! 
    if(theSame == 1){ 
     $(".check_list input").change(function(){ 
      // Here, however, `theSame` may have had its value changed 
      alert("b"+theSame); 
     }); 
    } 
}); 

:의 당신의 코드를 보도록하자 실행. 이벤트 핸들러 내부에 if 문을 이동하면

, 당신은 다른 결과를 볼 수 있습니다 : theSame1 경우 여기

$(".check_list input").change(function(){ 
    if(theSame){ 
     alert("b"+theSame); 
    } 
}); 

, 당신은 경고를 볼 수 있습니다.

+0

답장을 보내 주셔서 감사합니다! 이벤트 내부에서 if를 이동하려고 시도하지만 클릭 할 때 첫 번째 체크 박스 (내 프로젝트에서 반드시해야 함), 다른 체크 박스를 한 번 클릭하면 두 번 경고합니다. – Rupert

+0

@user : 이벤트 바인딩을 'if'와 함께 복사 한 것 같습니다. 문을'change' 함수에 추가합니다. 그래서 실행될 때마다 이벤트를 다시 바인드합니다. 당신은 아마 그것을하고 싶지 않을 것입니다. –

+0

네, 마침내 했어요. – Rupert