jQuery 사용하기 표시/숨기기

Question

입력으로 하나를 선택하여 .toggle을 표시하려면, 지금까지는 숨기고 있습니까? 또한이 코드는 장황 할 수도 있지만이 코드를 작성하여 새 클래스 이름을 쓰지 않고도 다시 사용할 수 있도록하는 방법은 무엇입니까?

여기에 내 코드 스크립트입니다 :

$(function() { 
if ($(".binary").val() == "0"){ 
$(".toggle").hide(); 
} else { 
$(".toggle").show(); 
} 
}); 

내 HTML

<div class="option checkbox"> 
    <label class="field_wrap"> 
    <div class="label">Show Borders</div> 
     <div class="field"> 
     <select class="binary tug" name="show_post_borders"> 
     <option value="0"></option> 
     <option value="1"></option> 
     </select> 
    </div> 
    </label> 
</div> 

<div class="toggle">Filer</div> 

Answer 1

과 같이, 변화 핸들러에 함수를 포장하십시오 :

$(function() { 
    $('.binary').change(function() { 
     if ($(".binary").val() == "0"){ 
      $(".toggle").hide(); 
     } else { 
      $(".toggle").show(); 
     } 
}); 

Answer 2

자바 스크립트는 한 번만 때 실행 페이지가 로딩 중입니다. 귀하가 제공 한 정보에 기반 나는 당신이 정말로 원하는 것은이 생각 :

$(function() { 
    $(".binary").change(function() { 
    if ($(this).val() == "0"){ 
     $(".toggle").hide(); 
    } else { 
     $(".toggle").show(); 
    } 
    }); 
}); 

의 차이는 여기에 당신이 변화 이벤트가 발생할 때마다 실행하는 기능을 설정하는 (= 당신이 당신의 선택을 변경하는 것입니다 선택 상자에서). 이 같은

Answer 3

뭔가 당신이하고자하는지해야한다 : http://jsfiddle.net/BbXYt/

$(document).ready(function(){ 
    $(".binary").change(function(){ 
     if($(".binary").val() == "0"){ 
      $(".toggle").hide(); 
     } else { 
      $(".toggle").show(); 
     } 
    }); 

    $(".toggle").hide(); 
}); 

HTML :

<div class="option checkbox"> 
    <label class="field_wrap"> 
    <div class="label">Show Borders</div> 
     <div class="field"> 
     <select class="binary tug" name="show_post_borders"> 
     <option value="0">0</option> 
     <option value="1">1</option> 
     </select> 
    </div> 
    </label> 
</div> 
<div class="toggle">Filer</div> 

Answer 4

당신은 당신이 재사용 가능한 코드를 원하는 언급했다. 이 시도 :

$(function() { 
    $(".toggle_field").change(function() { 
     var field = $(this); 
     if (field.val() == field.data("toggle-show-val")) { 
      $(field.data("toggle-selector")).show(); 
     } else { 
      $(field.data("toggle-selector")).hide(); 
     } 
    }); 
}); 

HTML

<div class="option checkbox"> 
    <label class="field_wrap"> 
    <div class="label">Show Borders</div> 
     <div class="field"> 
     <select class="binary tug toggle_field" data-toggle-selector=".toggle" data-toggle-show-val="1" name="show_post_borders"> 
     <option value="0"></option> 
     <option value="1"></option> 
     </select> 
    </div> 
    </label> 
</div> 

<div class="toggle">Filer</div> 

바이올린 : 전체 자바 스크립트 것을