我根据使用<div>
的ajax方法的响应隐藏了display: none
。如果我想在另一次调用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>
。
答案 0 :(得分: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
}
});
});
});
}
答案 1 :(得分:1)
正如评论中所讨论并在Matt的回答中所证明的,显示/隐藏元素的方法是正确的,即
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
/一个真值!这会导致你所描述的问题,因为代码总是隐藏元素,永远不会再显示它。要解决此问题,只需将行替换为:
if (currentControl.ControlValue == "hidden") {
答案 2 :(得分:0)
这是一个工作的例子。确保您正确访问该元素。
<!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>
&#13;