使用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

您的Javascript僅在加載頁面時執行一次。 根據您提供的信息，我認為您真正想要做的是：

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

不同之處在於，您在此處設置的功能將在每次發生更改事件時運行（=您在選擇框中更改選擇）。

Answer 2

嘗試將您的函數包裝在更改處理程序中，如下所示：

$(function () {
    $('.binary').change(function() {
        if ($(".binary").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>

小提琴： http ： //jsfiddle.net/qCeJ8/