JavaScript 返回函数的问题 !=.
Issue with JavaScript return function !=
我正在尝试制作自己的JS生成器。我对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 文档 关于 :visible
$(".codeContainer").filter(":visible").length;
来自 jQuery 文档:
因为 :visible 是一个 jQuery 扩展,而不是 CSS 规范的一部分,所以使用 :visible 的查询不能利用本机 DOM querySelectorAll() 方法提供的性能提升。为了在使用 :visible 选择元素时获得最佳性能,请先使用纯 CSS 选择器选择元素,然后使用 .filter(":visible")
假设
你想要一个可见编码容器的数量,var showingDivs = $(".codingContainer:visible").length;
怎么样
我删除了使用 .is("visible") 的建议,因为这会返回布尔值而不是集合
相关文章:
- 为变量分配多个nodejs导出返回值时出现问题
- 将数据加载到使用JSON返回的表单字段时出现问题
- async问题,JS Promise无法返回结果,但可以使用console.log
- Jquery函数返回订单问题
- 将一个php变量从js传递到php,并返回内容问题
- javasctipt-返回值的异步问题
- 嵌套异步函数未及时返回数据的问题
- 使用 GitHub API 在 dojo 中执行 PUT 更新会返回 400:解析 JSON 时出现问题
- 从ID Jquery类获取返回值时出现问题
- 从表单javascript返回值时出现问题
- Safari浏览器返回按钮问题
- jquery$.ajax使用返回数据时出现问题
- 存在从函数返回值的问题
- 解析通过AJAX POST格式化问题返回的JSON
- 酶测试问题返回未定义
- 如何循环通过无线电问题返回按钮Javascript
- Jquery计算问题(返回NaN)
- AngularJS服务中的问题返回函数
- Javascript Date问题返回比设置的时区少1天
- javascript退格默认问题..返回一页