样式使 JavaScript 代码无法正常运行

Styling makes javascript code not function properly

本文关键字：正常运行 代码 JavaScript 样式      更新时间：2023-09-26

我在玩这个代码：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>

在第一小提琴中，您display: none一些元素。 在第二个示例中，您不会这样做。

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

您可以添加一个仅显示一个的"就绪"处理程序。

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

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

你需要知道的第一件事是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
相关文章：