Mic*_*uce 3 html javascript css jquery filter
我正在使用jQuery来尝试查找哪些ID具有某个类名.这对我来说很重要的原因是我使用jQuery中的toggleClass()来显示和隐藏某些div,当选择一个按钮时我想要一个视口来显示或隐藏.我有两个个人目标:一个是在jquery中找到一种方法,另一个是了解如何在javascript中执行此操作.我知道javascript会更先进,我准备好了.
就这样毫无疑问我添加了代码.让我们首先看一下名为CodeAmend的个人托管网页,这是代码
*******HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Player</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<p>CodePlayer</p>
<nav>
<ul>
<li id="html-button" class="toggle selected no-highlight">HTML</li>
<li id="css-button" class="toggle selected no-highlight">CSS</li>
<li id="js-button" class="toggle selected no-highlight">JS</li>
<li id="result-button" class="toggle selected no-highlight">Result</li>
</ul>
</nav>
<div id="run-button" class="no-select">Run</div>
</div>
<div id="html-container" class="code-container">
<div class="code-label">HTML</div>
<textarea>Code</textarea>
</div>
<div id="css-container" class="code-container">
<div class="code-label">CSS</div>
<textarea>Code</textarea>
</div>
<div id="js-container" class="code-container">
<div class="code-label">JS</div>
<textarea>Code</textarea>
</div>
<div id="result-container" class="code-container">
<div class="code-label">Result</div>
<iframe>Code</iframe>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
*这里是javascript/jquery*
$("[id^=button]").click(function () {
$(this).toggleClass('selected');
// creates the name of a viewport ID. "view-" + html of button
var viewID = "#view-" + $(this).html();
$(viewID).toggle();
resetViewport(4);
});
function resetViewport(numberOfViewports) {
var viewSize;
switch (numberOfViewports) {
case 1:
viewSize = "400px";
break;
case 2:
viewSize = "198px";
break;
case 3:
viewSize = "131px";
break;
case 4:
viewSize = "98px";
break;
}
$("[id^=view]").css("width", viewSize);
}
这是css
* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
}
.clear-fix {
clear: both;
}
.no-highlight {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* why does menu margin excape parent without padding on container.. change to 0 and all margen excapes. */
#container {
width: 400px;
height: 456px;
margin: 0 auto;
padding-top: 1px;
background-color: #555;
border-radius: 5px;
}
/* Menu styling */
#menu {
width: 231px;
margin: 10px auto;
}
#menu li {
width: 50px;
height: 30px;
border: 2px solid #58d;
border-radius: 10px;
background-color: #000;
color: #333;
line-height: 30px;
text-align: center;
font-size: .8em;
text-transform: uppercase;
list-style: none;
float: left;
cursor: pointer;
}
#menu li+li {
margin-left: 5px;
}
#menu .selected {
background-color: #fff;
color: #333;
font-weight: bold;
}
[id^="view"] {
width: 98px;
height: 400px;
margin: 1px;
float: left;
background-color: #ddd;
}
jQuery集合和Javascript NodeLists都是类似数组的,因此您可以使用该.length属性来获取元素的数量.
jQuery的:
resetViewport($(".selected").length);
普通的Javascript:
resetViewport(document.getElementsByClassName("selected").length);
| 归档时间： |
|
| 查看次数： |
2969 次 |
| 最近记录： |