造型使JavaScript代码无法正常工作 [英] Styling makes javascript code not function properly
问题描述
我正在玩这个代码：
http://jsfiddle.net/VmVAq/
正如您所看到的，在页面加载时，仅显示DIV 1。正如你可以注意到的，样式是内联的，因此我决定将它添加到标题中：
http： //jsfiddle.net/Ym96t/2/
这是问题所在。现在在页面加载时，显示所有DIV，为什么？我如何分解代码？
如果您想查看代码这里：
原始：
< html>
< head>
< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js><<<< ; /脚本>
< script type =text / javascript>
函数showonlyone（thechosenone）{
$（'。newboxes'）。each（function（index）{
if（$（this）.attr（id）== thechosenone） {
$（this）.show（200）;
}
else {
$（this）.hide（600）;
}
} ）;
}
< / script>
< / head>
< body>
< div style =border：1px solid blue; background-color：＃99CCFF; padding：5px; width：150px;>
< a id =myHeader1href =javascript：showonlyone（'newboxes1'）; >只显示这一个< / a>
< / div>
< div class =newboxesid =newboxes1style =border：1px solid black; background-color：#CCCCCC; display：block; padding：5px; width：150px;> Div＃ 1·; / DIV>
< div style =border：1px solid blue; background-color：＃99CCFF; padding：5px; width：150px;>
< a id =myHeader2href =javascript：showonlyone（'newboxes2'）; >只显示这一个< / a>
< / div>
div class =newboxesid =newboxes2style =border：1px solid black; background-color：#CCCCCC; display：none; padding：5px; width：150px;> Div＃ 2'; / DIV>
< div style =border：1px solid blue; background-color：＃99CCFF; padding：5px; width：150px;>
< / div>
div class =newboxesid =newboxes3style =border：1px solid black; background-color：#CCCCCC; display：none; padding：5px; width：150px;> Div＃ 3'; / DIV>
< / body>
< / html>
样式：
< HTML>
< head>
< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js><<<< ; /脚本>
< script type =text / javascript>
函数showonlyone（thechosenone）{
$（'。newboxes'）。each（function（index）{
if（$（this）.attr（id）== thechosenone） {
$（this）.show（200）;
}
else {
$（this）.hide（600）;
}
} ）;
}
< / script>
< style>
#scoopout {
border：1px纯蓝色;
背景颜色：＃99CCFF;
padding：5px;
width：150px;
}
< / style>
< / head>
< body>
< div id =scoopout>
< a id =myHeader1href =javascript：showonlyone（'newboxes1'）; >只显示这一个< / a>
< / div>
< div class =newboxesid =newboxes1> Div＃1< / div>
< div id =scoopout>
< a id =myHeader2href =javascript：showonlyone（'newboxes2'）; >只显示这一个< / a>
< / div>
< div class =newboxesid =newboxes2> Div＃2< / div>
< div id =scoopout>
< / div>
< div class =newboxesid =newboxes3> Div＃3< / div>
< / body>
< / html>
好的，我已经重写了你的小提琴，甚至尽管你已经接受了答案，但未来可能会有帮助。
首先你需要知道JS中的函数是对象，所以你可以设置属性。这样做可以让您跟踪哪些元素在任何给定时间可见，而无需使用恶意代码，或解除绑定和重新绑定事件并使用闭包。我猜你已经听说过他们，但是有些陌生的领域，根据你的代码来判断。
接下来我做的是识别所有可点击的元素，隐藏secret divs，并将一个点击事件附加到您的链接中（使用 reveal 类）。然后，我为可见的元素分配一个引用，所以您可以在下一次点击事件时再次隐藏它。
由于您使用的是jquery 1.4。 4（用于升级的时间我会说），我保持它很简单：
这里的代码，用于评论/问题： p>
$（document）.ready（function（）
{//所有这些代码都会在页面加载时执行
$（'。newboxes'）。each（function（）
{
$（this）.hide（）;
}）;
$（'。 （showOne.visible&& showOne.visible.hide）
{
showOne.visible.hide（600） ）;
}
if（showOne.visible&& showOne.visible.attr（'id'）。replace（'newboxes'，'myHeader'）=== $（tihs）.attr （'id'））
{
showOne。 visible = undefined; //设置为undefined，否则下一次点击会尝试隐藏隐藏的div
return; //停止在这里，不要调用show method
}
showOne.visible = $（'＃'+ $（this）.attr（'id'）。replace（'myHeader'，'newboxes'））;
showOne.visible.show（200）;
}）;
$（'＃myHeader1'）。click（）; //显示页面加载的第一个div
}）; //在此之后的任何内容将尽快运行，可能在页面加载之前
I was playing around with this code: http://jsfiddle.net/VmVAq/
As you can see, on page load, only DIV 1 is displayed. And as you can notice, the styling is inline so I decided to add it to the header: http://jsfiddle.net/Ym96t/2/
This is where the problem is. Now on page load, all the DIVs are displayed, why? How did I break the code?
In case you want to review the code here:
Original:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
</script>
</head>
<body>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
</body>
</html>
Styled:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
</script>
<style>
#scoopout {
border: 1px solid blue;
background-color: #99CCFF;
padding: 5px;
width: 150px;
}
</style>
</head>
<body>
<div id="scoopout">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes1">Div #1</div>
<div id="scoopout">
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes2">Div #2</div>
<div id="scoopout">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes3">Div #3</div>
</body>
</html>
Ok, I've rewritten your fiddle, and even though you've accepted an answer, it might prove helpful in the future.
First thing you need to know is that functions in JS are objects, so you can set properties. Doing this enables you to track which element is visible at any given time, without the need for evil globals, or unbinding and rebinding your events and using closures. I'm guessing you have heard of them, but there somewhat unfamiliar territory, judging by your code.
The next thing I did was identify all the clickable elements, hide the "secret" divs, and attach a click event to your links (using the reveal class). Then, I assign a reference to the element that has been made visible, so you can hide it again on a next click event.
Since you're using jquery 1.4.4 (time for an upgrade I'd say), I kept it quite simple:
The code here, for remarks/questions: comments are welcome
$(document).ready(function()
{//All this code will be executed when the page has loaded
$('.newboxes').each(function()
{
$(this).hide();
});
$('.reveal').click(function showOne()
{
if (showOne.visible && showOne.visible.hide)
{
showOne.visible.hide(600);
}
if (showOne.visible && showOne.visible.attr('id').replace('newboxes','myHeader') === $(tihs).attr('id'))
{
showOne.visible = undefined;//set to undefined, otherwise the next click will try to hide the hidden div
return;//stop here, don't invoke show method
}
showOne.visible = $('#'+$(this).attr('id').replace('myHeader','newboxes'));
showOne.visible.show(200);
});
$('#myHeader1').click();//show the first div on page load
});//anything after this will be run as soon as possible, likely before the page loads
这篇关于造型使JavaScript代码无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
