gpt4 book ai didi

javascript - JavaScript 返回函数出现问题!=

转载 作者:行者123 更新时间:2023-11-28 15:28:57 24 4
gpt4 key购买 nike

我正在尝试制作自己的 JS Builder。我对 div 的宽度有疑问。

HTML

<html>
<head>
<meta charset="utf-8">
<title>JSCodePlayer</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/excite-bike/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<style>
body{
margin:0;
padding:0;
font-family:Lucida Sans;
}
#header{
width:100%;
height:50px;
background-color:#0084FF;
float:left;
color:white;
}
.fixedwidth{
margin:0 auto;
width:1250px;
}
#logodiv{
padding:12px 0 0 0;
float:left;
font-size:1.2em;
}
#rundiv{
float:right;
}
#rundiv button{
width:150px;
padding:7px;
border-radius:5px;
height:50px;
font-size:1.1em;
background-color:#0463C8;
border:1px solid #0084FF;
}
#toggles{
margin:0 auto;
width:324px;


}
#toggles ul{
margin:0;
border:1px solid #0463C8;
height:47px;
padding:0;



}
#toggles li{
float:left;
list style:none;
padding:15px;
position:relative;


}
.border-right{border-right:2px solid #0084FF;}
.codeContainer{
height:100%;
width:50%;
float:left;

position:relative;
}
.codeContainer textarea{
height:100%;
width:100%;
border:none;
border-right:1px solid #0463C8;
font-size:110%;


}
.codeLabel{
position:absolute;
top:2%;
left:90%;
}
#CSSContainer, #JavaScriptContainer{
display:none;
}
iframe{
height:100%;
width:100%;
border:none;
}
.selected{
background-color:#0463C8;
}

</style>
<div id="wrapper">
<div id="header">
<div class="fixedwidth">
<div id="logodiv">JSCodePlayer</div>
<div id="rundiv"><button>Run</button></div>
<div id="toggles">
<ul>
<li class="toggles border-right selected">HTML</li>
<li class="toggles border-right" >CSS</li>
<li class="toggles border-right">JavaScript</li>
<li class="toggles selected">Result</li>
</ul>
</div>
</div>
</div>
<div class="codeContainer" id="HTMLContainer">
<div class="codeLabel">HTML</div>
<textarea></textarea>
</div>
<div class="codeContainer" id="CSSContainer">
<div class="codeLabel">CSS</div>
<textarea></textarea>
</div>
<div class="codeContainer" id="JavaScriptContainer">
<div class="codeLabel">JS</div>
<textarea></textarea>
</div>
<div class="codeContainer" id="ResultContainer">
<div class="codeLabel">Result</div>
<iframe></iframe>
</div>
</div>
<script>
var windowHeight=$(window).height();
var headerHeight=$("#header").height();
var codeContainerHeight=windowHeight-headerHeight;
$(".codeContainer").height(codeContainerHeight);

$(".toggles").click(function() {
$(this).toggleClass("selected");
var activeDiv=$(this).html();
$("#"+activeDiv+"Container").toggle();
alert(showingDivs);
});
var showingDivs=$(".codeContainer").filter(function() {
return($(this).css("display")!="none");
}).length;
alert(showingDivs);
var width=100/showingDivs;
$(".codeContainer").width(width+"%");

</script>
</body>

以下语句无法正常工作。我立即需要帮助。

var showingDivs=$(".codeContainer").filter(function() {
return($(this).css("display")!="none");
}).length;

预先感谢您为我的问题投入一些时间和精力。

最佳答案

检查jQuery docs about :visible

$(".codeContainer").filter(":visible").length;

来自 jQuery 文档:

Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible")

关于javascript - JavaScript 返回函数出现问题!=,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28127509/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com