hide（）在運行時不起作用

我編寫了一個腳本，它可以隱藏或顯示我的類，但它在運行時不起作用，並且不會動態改變任何想法？hide（）在運行時不起作用

我的腳本：

$(document).ready(function() { 
     if (document.getElementById('addContent').checked) { 
      $(".contentForm").show(); 
      $(".searchContentForm").hide(); 
     } 
     else if (document.getElementById('editContent').checked || 
         document.getElementById('deleteContent').checked) { 
      $(".searchContentForm").show(); 
      $(".contentForm").hide(); 
     } 
     else { 
      $(".searchContentForm").hide(); 
      $(".contentForm").hide(); 
     } 
    });

的jsfiddle演示： http://jsfiddle.net/BpMed/

來源

2012-10-05 iSun

你知道什麼''||是？它可以簡化您的代碼並消除大量的複製和粘貼。 – epascarello

它在「非」 - 運行時如何工作？或者你的意思是它根本不起作用*？ – m90

你爲什麼要混合和匹配'getElementById'和jquery？ –

簡化代碼：

$(".searchContentForm").hide(); 
$(".contentForm").hide(); 
$('input[name=tContent]').click(function() {  
    if ($('#addContent').is(':checked')) { 
     $(".contentForm").show(); 
     $(".searchContentForm").hide(); 
    } 
    else if ($('#editContent').is(':checked') || 
      $('#deleteContent').is(':checked')) { 
     $(".searchContentForm").show(); 
     $(".contentForm").hide(); 
    } 
});

參考LIVE DEMO

來源

2012-10-05 13:15:43

+ +1一個用於凝聚elses – Eonasdan

+1謝謝這兩個答案都非常好。 – iSun

請試試這個：

function forDynamic() 
{ 
     if (document.getElementById('addContent').checked) { 
      $(".contentForm").show(); 
      $(".searchContentForm").hide(); 
     } 
     else if (document.getElementById('editContent').checked || 
         document.getElementById('deleteContent').checked) { 
      $(".searchContentForm").show(); 
      $(".contentForm").hide(); 
     } 
     else { 
      $(".searchContentForm").hide(); 
      $(".contentForm").hide(); 
     } 

}

加入上面的代碼在你的JavaScript。和每次更新時間，您只需撥打電話forDynamic（）;

來源

2012-10-05 13:06:57

很難說這麼少的上下文，但它看起來像這個函數只在document.ready上執行 - 初始頁面加載。如果你想要更動態的東西，你需要將你的函數綁定（http://api.jquery.com/bind/）到這些複選框的更改事件。

的類似的東西非常簡單的例子： http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange

來源

2012-10-05 13:10:32 Mat

原因之一，爲什麼而使用jQuery您使用document.getElementById？

您還需要將您的if塊封裝在正在尋找要點擊的收音機的功能的一側。請參閱jsfiddle。我爲每個複選框添加了一個changeup類，你當然可以添加任何你想要的。

$(".changeUp").click(function() { 
    if ($('#addContent').is(':checked')) { 
     $(".contentForm").show(); 
     $(".searchContentForm").hide(); 
    } 
    else if ($('#editContent').is(':checked')) { 
     $(".searchContentForm").show(); 
     $(".contentForm").hide(); 
    } 
    else if ($('#deleteContent').is(':checked')) { 
     $(".searchContentForm").show(); 
     $(".contentForm").hide(); 
    } 
    else { 
     $(".searchContentForm").hide(); 
     $(".contentForm").hide(); 
    } 
});

來源

2012-10-05 13:11:43 Eonasdan

工作就像一個魅力，謝謝。 – iSun

沒問題！很高興幫助 – Eonasdan

Siva Charan的[答案]（http://stackoverflow.com/a/12747068/237917）實際上更好。它更緊湊，減少了冗餘代碼。我只是沒有想到做到這一點， – Eonasdan

我知道你已經接受一個答案，但你可以使用切換，並通過在一個條件 - 所以true = show和false = hide - 這幾乎可以擺脫if/else語句中的重複內容來顯示/隱藏元素。

$(".searchContentForm").hide(); 
$(".contentForm").hide(); 
$('input[name=contentMng]').change(function() { 
    var adc = $('#addContent').is(':checked'); 
    var edc = $('#editContent').is(':checked') || $('#deleteContent').is(':checked'); 
    $(".contentForm").toggle(adc); 
    $(".searchContentForm").toggle(edc); 
});

http://jsfiddle.net/HLmru/

來源

2012-10-05 14:14:14

+1好主意，無論如何謝謝。 – iSun

hide（）在運行時不起作用

回答

相關問題