0

我在玩这个代码：http: //jsfiddle.net/VmVAq/

如您所见，在页面加载时，仅显示 DIV 1。正如你所注意到的，样式是内联的，所以我决定将它添加到标题中：http: //jsfiddle.net/Ym96t/2/

这就是问题所在。现在在页面加载时，所有的 DIV 都显示出来了，为什么？我是如何破解密码的？

如果您想在此处查看代码：

原来的：

<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>

风格：

<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>
4

2 回答 2

5

在第一个小提琴中，您给出了一些元素display: none。在第二个示例中，您没有这样做。

换句话说，您所做的不仅仅是将样式规则移动到一个<style>元素中——您还摆脱了一些 CSS。

您可以添加一个只显示一个的“就绪”处理程序。

$(function() { showonlyone('newboxes1'); });
于 2012-08-08T14:20:37.163 回答
1

好的，我已经重写了你的小提琴，即使你已经接受了答案，它在未来可能会有所帮助。

首先你要知道JS中的函数是对象，所以你可以设置属性。这样做可以让您在任何给定时间跟踪哪个元素是可见的，而无需使用邪恶的全局变量，或者取消绑定和重新绑定您的事件并使用闭包。我猜你已经听说过它们，但是从你的代码来看，那里有些陌生的领域。

我做的下一件事是识别所有可点击的元素，隐藏“秘密” div，并将点击事件附加到您的链接（使用reveal类）。然后，我为已显示的元素分配一个引用，以便您可以在下一次单击事件时再次隐藏它。

由于您使用的是 jquery 1.4.4（我想说升级的时间），所以我保持非常简单：

一个工作小提琴

这里的代码，用于评论/问题：欢迎评论

$(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
于 2012-08-08T14:42:27.067 回答