使用顯示時如何顯示Div：無

Question

我已經使用display: none基於ajax方法的響應隱藏了<div> 。 如果我想在再次調用AJAX方法時顯示相同的<div> ，該怎么辦？

我想知道display: none實際上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';
            }
          }
        }
      }
    });
  }
});

隱藏<div>后，最后一行（ ...style.display ='block'; ）不會顯示它。

Answer 1

使用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
          }
        });
      });
  });
}

Answer 2

正如評論中所討論並在Matt的答案中所演示的那樣，顯示/隱藏元素的方法是正確的，即

element.style.display = "block";

即使通過應用display: none隱藏了它，也仍會表現出預期的效果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 /真實值！ 這將導致您正在描述的問題，因為代碼將始終隱藏該元素，而不再顯示它。 要解決此問題，只需將行替換為：

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

Answer 3

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

 <!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>

使用顯示時如何顯示Div：無

問題描述

3 個解決方案

解決方案1
1 已采納 2017-07-17 18:12:57

解決方案2
1 2017-07-17 18:18:08

解決方案3
0 2017-07-17 18:06:44

使用顯示時如何顯示Div：無

問題描述

3 個解決方案

解決方案1 1 已采納 2017-07-17 18:12:57

解決方案2 1 2017-07-17 18:18:08

解決方案3 0 2017-07-17 18:06:44

解決方案1
1 已采納 2017-07-17 18:12:57

解決方案2
1 2017-07-17 18:18:08

解決方案3
0 2017-07-17 18:06:44