Question

如您所见，在页面加载时，仅显示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>

Answer 1

在第一个小提琴中，你给出了一些元素display: none。你不会在第二个例子中这样做。

换句话说，你做的不仅仅是将样式规则移到<style>元素 - 你还摆脱了一些CSS。

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

$(function() { showonlyone('newboxes1'); });

Answer 2

好的，我已经改写了你的小提琴，即使你已经接受了答案，它可能在将来有用。

您需要知道的第一件事是JS中的函数是对象，因此您可以设置属性。通过这样做，您可以跟踪在任何给定时间可见的元素，而无需使用邪恶的全局变量，或者解除绑定并重新绑定事件和使用闭包。我猜你已经听说过它们了，但是根据你的代码判断，有一些不熟悉的领域。

我接下来要做的就是识别所有可点击的元素，隐藏“secret” div，并将点击事件附加到您的链接（使用reveal类）。然后，我为已经可见的元素分配一个引用，这样您就可以在下一次单击事件中再次隐藏它。

由于您正在使用jquery 1.4.4（升级的时间我会说），我保持这很简单：

a working fiddle

此处的代码，备注/问题：欢迎提出意见

$(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代码无法正常运行

2 个答案: