Использование jQuery Show/Hide

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

Ваш Javascript выполняется только один раз, когда страница загружается. Исходя из вашей предоставленной информации, я думаю, что вы действительно хотите сделать это:

$(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> 

Fiddle: http://jsfiddle.net/qCeJ8/