我有一个带有几个按钮的页面和一个关联的文本div。我可以通过单击每个按钮来切换文本div的可见性。我想获得每个文本div的可见性,并使用它来重现页面状态。如何获得文本div的“可见性”?
到目前为止,我的代码仅以“可见”作为响应。
非常感谢。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Visibility</title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
function getVis(textDiv){
if ($(textDiv).is(":visible")) {
alert("visible");
}else{
alert("not visible");
}
}
</script>
</head>
<body>
<button id="btn1" onclick="$(div1).slideToggle(500), getVis(div1)">button 1</button>
<div id = "div1">div 1 text</div>
<br>
<button id="btn2" onclick="$(div2).slideToggle(500), getVis(div2)">button 2</button>
<div id = "div2">div 2 text</div>
</body>
</html>
由于slideToggle
是过渡(超时操作),请检查可见性在先以调用该过渡,即反转呼叫顺序。例如
<button id="btn1" onclick="getVis(div1), $(div1).slideToggle(500)">button 1</button>
这里是演示。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Visibility</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function getVis(textDiv){
if ($(textDiv).is(":visible")) {
alert("visible");
}else{
alert("not visible");
}
}
</script>
</head>
<body>
<button id="btn1" onclick="getVis(div1), $(div1).slideToggle(500)">button 1</button>
<div id = "div1">div 1 text</div>
<br>
<button id="btn2" onclick="getVis(div2), $(div2).slideToggle(500)">button 2</button>
<div id = "div2">div 2 text</div>
</body>
</html>
要确定可见性状态之后过渡,请像这样从完成例程中调用getVis
<button id="btn1" onclick="$(div1).slideToggle(500, function() { getVis(div1) })">button 1</button>
这里是完成方法的演示。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Visibility</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
function getVis(textDiv){
if ($(textDiv).is(":visible")) {
alert("visible");
}else{
alert("not visible");
}
}
</script>
</head>
<body>
<button id="btn1" onclick="$(div1).slideToggle(500, function() { getVis(div1) })">button 1</button> <div id = "div1">
div 1 text
</div>
<br>
<button id="btn2" onclick="$(div2).slideToggle(500, function() { getVis(div2) })">button 2</button>
<div id = "div2">div 2 text</div>
</body>
</html>