使用显示时如何显示 Div：无 [重复]答案

【问题标题】：How to Show a Div when used display:none [duplicate]使用显示时如何显示 Div：无 [重复]
【发布时间】：2017-12-22 09:00:18
【问题描述】：

我根据使用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>。

【问题讨论】：

你能确认success函数被调用了吗？您能确认找到该元素吗？您可以使用 javascript 调试控制台（在任何主流浏览器中）来测试代码行，看看它们是否对 DOM 有任何影响。 display: none 不会从 DOM 中移除元素。
现在就使用 jQuery。 $("#"+ ctrlName).show() 或 $("#"+ ctrlName).hide() 假设你在某处有 ctrlName（我看不到它）
是的，成功的方法总是被执行。是的，该元素将在初始页面加载时找到。但是基于这个 ajax 响应我们需要隐藏和显示一些 div 的
这是零意义：var targetDropDown = document.getElementById(ctrlName); if (targetDropDown == null) { targetDropDown = document.getElementById(ctrlName); }
如果你在targetDropDown 变量中有一个元素，那么targetDropDown.style.display = 'block'; 确实应该确保它被显示，因为它本质上将其内联样式（覆盖类等）设置为display: block; ......所以问题很可能是您的脚本是否曾经到达发生这种情况的行 - 您是否尝试在显示设置为阻止之前放置控制台日志记录调用？

标签： javascript jquery css asp.net ajax

【解决方案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
          }
        });
      });
  });
}

【讨论】：

【解决方案2】：

正如在 cmets 中讨论并在 Matt 的回答中演示的那样，显示/隐藏元素的方法是正确的，即

element.style.display = "block";

即使在应用display: none 将其隐藏后，也会按照您的预期行事。下面是一个使用 jQuery 的示例（因为这个 is 是一个 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") {

【讨论】：

OP 在他自己的代码中很难理解 jQuery。而且他正在使用 jQuery，因此 .show,hide,toggle 在我看来比没有 Babel 甚至不兼容的 ES6 更有用
@mplungjan 该演示仅用于演示目的，但是是的，我可能会将其更改为 jQuery 以避免混淆。
@mplungjan 我知道，但可能需要演示来说服 OP。

【解决方案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。但是一旦它被隐藏，我需要把它找回来