如何在使用顯示時顯示分區：無

我已根據使用display: none的ajax方法的響應隱藏了<div>。如果我想在另一次調用AJAX方法時顯示相同的<div>怎麼辦？如何在使用顯示時顯示分區：無

我想知道display: none是否實際上從DOM中刪除元素，因爲使用display: block不會使<div>再次可見。如何使用display屬性顯示和隱藏相同的div。下面是我使用AJAX調用的代碼：

$.ajax({ 
    type: "POST", 
    url: "Request.aspx/FireEvents", 
    data: JSON.stringify({ controlValues: pageControlNamesAndValues }), 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function (response) { 
    var controlVals = response.d; 
    $.each(controlVals, function (index, currentControl) { 
     var targetDropDown = document.getElementById(ctrlName); 
     console.log('Targetdropdown is ' + targetDropDown); 
     if (targetDropDown != null) { 
     if (targetDropDown instanceof HTMLDivElement) { 
      if (currentControl.ControlName == "LogicChecks") { 
      if (currentControl.ControlValue = "hidden") { 
       targetDropDown.style.display = 'none'; 
      } else { 
       targetDropDown.style.display = 'block'; 
      } 
      } 
     } 
     } 
    }); 
    } 
});

最後一行（...style.display ='block';）不顯示<div>一旦被隱藏。

來源

2017-07-17 Programmerzzz

您可以確認調用了「成功」函數嗎？你能確認元素被發現嗎？您可以使用javascript調試控制檯（在任何主要瀏覽器中）來測試代碼行，看看它們是否對DOM有任何影響。 'display：none'不會從DOM中刪除元素。 –

現在就使用jQuery。 $（「＃」+ ctrlName）.show（）'或'$（「＃」+ ctrlName）.hide（）'假設你有ctrlName某處（我看不到它） – mplungjan

是的，成功方法總是執行。是的，該元素將在初始頁面加載時找到。但後來基於這個ajax響應，我們需要隱藏並顯示一些div的 – Programmerzzz

使用jQuery來顯示和隱藏：

$("#"+ ctrlName).show() 
$("#"+ ctrlName).hide()

還可以使用==測試相等; =是分配這種說法是不隱藏的測試，但分配隱藏

if(currentControl.ControlValue="hidden")

最後

var targetDropDown = document.getElementById(ctrlName); 
if (targetDropDown == null) { targetDropDown = 
    document.getElementById(ctrlName); }

沒有邏輯意義

也許這就是你的意思

function ProcessEventsActions(pageControlNamesAndValues) { 
    $.ajax({ 
     type: "POST", 
     url: "Request.aspx/FireEvents", 
     data: JSON.stringify({ 
     controlValues: pageControlNamesAndValues 
     }), 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(response) { 
     var controlVals = response.d; 
     $.each(controlVals, function(index, currentControl) { 
      if (currentControl.ControlName == "LogicChecks") { 
      targetDropDown = $("#" + currentControl.controlDiv); // or whatever the name is 
      targetDropdown.toggle(currentControl.ControlValue != "hidden"); // show if not hidden 
      } 
     }); 
     }); 
    }); 
}

來源

2017-07-17 18:12:57 mplungjan

下面是它工作的一個例子。確保您正確訪問元素。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#myDIV { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: lightblue; 
 
    display:none; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<p>Click the "Try it" button to set the display property of the DIV element to "block":</p> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<div id="myDIV"> 
 
This is my DIV element. 
 
</div> 
 

 
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p> 
 

 
<script> 
 
function myFunction() { 
 
    document.getElementById("myDIV").style.display = "block"; 
 
} 
 
</script> 
 

 
</body> 
 
</html>

來源

2017-07-17 18:06:44 Matt

這是否是對上述問題的回答？ – mplungjan

這實際上顯示了div。但是我需要一旦隱藏它就返回它。 – Programmerzzz

正如評論討論和演示在馬特的答案，用於顯示/隱藏元素的方法是正確的，那就是

element.style.display = "block";

表現爲你所期望的，它已被應用display: none隱藏即使經過。下面是使用jQuery，而不是一個例子（因爲這是一個 jQuery的問題）：

$("#click1").click(function() { $("#el").hide(); }); 
 
$("#click2").click(function() { $("#el").show(); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="el">Visible</div> 
 
<button id="click1">Click to hide</button> 
 
<button id="click2">Click to show</button>

的問題肯定是你的代碼的其餘部分。一個可能的嫌疑人是這一行：

if (currentControl.ControlValue = "hidden") {

如果你確實直接複製你的代碼，這是不是一個錯字，這種情況將始終評估爲true/A truthy價值！這會導致你描述的問題，因爲代碼總是隱藏元素，從不再顯示它。爲了解決這個問題，只需將該行替換爲：

if (currentControl.ControlValue == "hidden") {

來源

2017-07-17 18:18:08

OP很難在他自己的代碼中理解jQuery。而他正在使用jQuery。因此，顯示，隱藏，切換在我看來更加有用，即沒有Babel也不兼容的ES6 – mplungjan

@mplungjan該演示僅用於演示目的，但是，我可能會將其更改爲jQuery以避免混亂。 –

我已經發布瞭如何在jQuery中做到這一點:) – mplungjan

如何在使用顯示時顯示分區：無

回答

相關問題