使用jQuery顯示/隱藏

當選擇一個作爲輸入要顯示.toggle，但它只是隱藏它到目前爲止？此外，這可能是一個長遠的鏡頭，但我怎麼寫這個代碼，以便我可以再次使用它，我將需要，而不必編寫新的類名稱。使用jQuery顯示/隱藏

這裏是我的代碼腳本：

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

來源

2013-10-24 user2726228

這是你整個的Javascript？你是用'onLoad'還是類似的包裝呢？ –

嘗試包裝你的函數的變化處理，像這樣：

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

來源

2013-10-24 21:27:27

你的JavaScript只執行一次，當該頁面正在加載。根據您提供的信息，我認爲你真正想做的事是這樣的：

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

不同的是，這裏要設置將運行每一個變化，事件發生時間的函數（=你改變你的選擇在選擇框中）。

來源

2013-10-24 21:28:42 TheStoryCoder

關於['$ .toggle（）']（http://api.jquery.com/toggle/#toggle-showOrHide）？你會寫在一行。 – Shad

感謝這項工作，我嘗試使用change（），但是我寫錯了。 – user2726228

很高興我能幫到你。如果您解決了您的問題，我們將非常感激，如果您將最佳答案標記爲已接受。 – TheStoryCoder

像這樣的事情應該是你想要做什麼：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>

來源

2013-10-24 21:31:41 Jono20201

你提到你想重用的代碼。試試這個：

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

來源

2013-10-24 21:36:10

使用jQuery顯示/隱藏

回答

相關問題