-1
我在这里有一个问题。错误地读取HTML数据
我想知道为什么我的网页输出错误。
例如，当我打勾A ...它显示，而不是正确的一个，其被认为是A.
然后，对于最后3分别J，K，L C ...这将根本不显示任何东西。
<!DOC HTML>
<html>
<title></title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-
1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul#nav > li').click(function() {
selfActive = $(this).hasClass("show") ? true : false;
$(".show").removeClass("show").find("ul").slideDown();
if (!selfActive) {
$(this).addClass("show").find("ul").slideDown();
}
});
});
$(document).ready(function() {
$("input[name='Option']").change(function() {
var maxAllowed = 3;
var cnt = $("input[name='Option']:checked").length;
if (cnt > maxAllowed) {
$(this).prop("checked", "");
alert('You can select maximum ' + maxAllowed + ' phones only!!');
}
});
});
$(document).ready(function() {
$('input[type="submit"]').click(function() {
if ($('input[name=Option]:checked').length > 1) {
$('.frame-wrapper').fadeOut();
$('input[name=Option]').each(function() {
if ($(this).prop("checked")) {
$('.frame-wrapper').eq($(this).index() - 1).fadeIn();
}
});
}
else {
alert("You must compare with more than 1 item.!!");
}
});
$('input[type="compare"]').click(function() {
$('.frame-wrapper').eq($(this).index() - 1).fadeIn();
});
});
</script>
<style type="text/css">
.frame-wrapper {
display: none;
float: left;
width: 32%;
margin-top: 20px;
margin-right: 1%;
border-radius: 30px;
background-color: #eee;
}
#nav li > ul {
display: none;
}
</style>
</head>
<body>
<b>Please select an option</b>
<hr>
<ul id="nav">
<li>
<a href="#">Category 1</a>
<ul>
<li>
A <input type="checkbox" name="Option" />
B <input type="checkbox" name="Option" />
C <input type="checkbox" name="Option" />
</ul>
</li>
</ul></hr>
<hr>
<ul id="nav">
<li>
<a href="#">Category 2</a>
<ul>
<li>
D <input type="checkbox" name="Option" />
E <input type="checkbox" name="Option" />
F <input type="checkbox" name="Option" />
</ul>
</li>
</hr>
</ul><hr>
<ul id="nav">
<li>
<a href="#">Category 3</a>
<ul>
<li>
G <input type="checkbox" name="Option" />
H <input type="checkbox" name="Option" />
I <input type="checkbox" name="Option" />
</ul>
</li>
</hr>
</ul><hr>
<ul id="nav">
<li>
<a href="#">Category 4</a>
<ul>
<li>
J <input type="checkbox" name="Option" />
K <input type="checkbox" name="Option" />
L <input type="checkbox" name="Option" />
</ul>
</li>
</ul></hr>
<input type="submit" value="Compare" />
<form>
<input type="button" value="Clear"
onclick="window.location.href=window.location.href">
</form>
<div style="clear: both;"></div>
<div id="tblA" class="frame-wrapper">
<b><em>You Selected A</em></b>
</div>
<div id="tblB" class="frame-wrapper">
<b><em>You Selected B</em></b>
</div>
<div id="tblC" class="frame-wrapper">
<b><em>You Selected C</em></b>
</div>
<div id="tblD" class="frame-wrapper">
<b><em>You Selected D</em></b>
</div>
<div id="tblE" class="frame-wrapper">
<b><em>You Selected E</em></b>
</div>
<div id="tblF" class="frame-wrapper">
<b><em>You Selected F</em></b>
</div>
<div id="tblG" class="frame-wrapper">
<b><em>You Selected G</em></b>
</div>
<div id="tblH" class="frame-wrapper">
<b><em>You Selected H</em></b>
</div>
<div id="tblI" class="frame-wrapper">
<b><em>You Selected I</em></b>
</div>
<div id="tblJ" class="frame-wrapper">
<b><em>You Selected J</em></b>
</div>
<div id="tblK" class="frame-wrapper">
<b><em>You Selected K</em></b>
<div id="tblL" class="frame-wrapper">
<b><em>You Selected L</em></b>
</div>
</div>
</body>
</html>
纠正你的doctype声明和使用propper HTML一些闭幕礼丢失。 –
'selfActive = $（this）.hasClass（“show”）？ true：false;' - 这里不需要三元运算符。 '.hasClass（）'返回一个布尔值。 – Scimonster
@kpsingh，是吧？是不是应该是。 ＆我已经添加了失踪的李，不幸的是仍然是相同的..它正在读取数据不一致 – user3500105