我的代碼顯示/隱藏功能有什麼問題？

Question

這是我的HTML和JavaScript代碼：

HTML：

<div id="common"> 
    Hi Welcome 
</div> 

<div> 
    <a href="javascript:toggleDiv('customize');" >click here</a> 
</div> 

<div id="customize"> 
    <form action="" method="post" id="MyForm"> 
     {% form%} 
    </form> 
</div> 

Javascript代碼：

<script> 
    function toggleDiv(divId) { 
     if ($("#"+divId).show()) { 
      $("#common").hide(); 
     } 
     else { 
      $("#common").show(); 
     } 
    } 
</script> 

如果我點擊鏈接 「點擊這裏」 一個DIV ID應被隱藏，另一個應該顯示，如果我再次點擊它，反之亦然應該發生。我試過使用這個JavaScript，但它不能正常工作

Answer 1

您需要使用:visible檢查，如果通過DIV已經可見。試試這個：

function toggleDiv(divId) { 
    var $el = $("#" + divId); 
    if ($el.is(":visible")) { 
     $el.hide(); 
     $("#common").hide(); 
    } 
    else { 
     $el.show(); 
     $("#common").show(); 
    } 
} 

你也應該改變你的代碼，使用jQuery你附加的事件，而不是笨重的onclick屬性：

<a href="#" id="link" data-rel="other-div">click here</a> 

$("#link").click(function(e) { 
    e.preventDefault(); 
    toggleDiv($(this).data("other-div")); 
}); 

Answer 2

你的代碼總是要輸入if，從來沒有else。您正在評估show的返回值，該值總是一個始終評估爲true的jQuery對象。看到

檢查，如果該元素是當前可見，使用is方法和:visible選擇：

function toggleDiv(divId) { 
    if ($("#"+divId).is(":visible")){ 
     $("#common").hide(); 
    } 
    else{ 
     $("#common").show(); 
    } 
} 

作爲一個側面說明，爲何不動你的事件處理程序代碼了HTML，並用其綁定jQuery的，因爲你已經在使用它（以下假設你給鏈接「yourLink」的ID）：

$("#yourLink").click(function() { 
    //Event handler 
}); 

Answer 3

試試這個：

function toggleDiv(divId) { 
    if ($("#"+divId).is(':visible')) { 
     $("#common").hide(); 
    } 
    else { 
     $("#common").show(); 
    } 
} 

Answer 4

您正在測試我應用jQuery .show()方法的$("#"+divId)的可見性！

什麼，你應該做的是與:visible測試這樣的可見性：

if ($("#"+divId).is(":visible")) {...} 

所以你工作，應成爲：

function toggleDiv(divId) { 
    if ($("#"+divId).is(":visible")){ 
     $("#common").hide(); 
    }else{ 
     $("#common").show(); 
    } 
} 

---

但，如果你只需要切換元素的當前顯示狀態，您可以使用.toggle()，如下所示：

function toggleDiv(divId) { 
    $("#"+divId).toggle(); 
} 

Answer 5

試試這個沒有單獨的功能。

<div id="common"> 
     Hi Welcome 
</div> 

<div> 
<a onClick="$('#customize').toggle()" >click here</a> 
</div> 

<div id="customize"> 
    <form action="" method="post" id="MyForm"> 
     Content 
    </form>​​​​​​ 

獎勵積分不顯眼的實例：

<div id="common"> 
     Hi Welcome 
</div> 

<div> 
<a data-linkedId="customize" >click here</a> 
</div> 

<div id="customize"> 
    <form action="" method="post" id="MyForm"> 
     Content 
    </form>​​​​​​ 

<script type="text/javascript"> 
$(document).ready(){ 
    $('a[data-linkedId]').on('click',function(){ 
     var divId = $(this).attr('data-linkedId'); 
     $('#'+divId).toggle(); 
    }); 
} 
</script>