Question

我正在尝试在我的html表格中运行多个脚本，它似乎无法正常工作。除了闪烁功能的脚本外，所有其他脚本都有效。我不知道问题是什么。你能找到我的代码的问题吗？提前谢谢！

以下是我的代码：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: coral;
    color: white;
}

.text2{
  color: white;
  width: 100px;
  float: right;
  padding-top: 10px;
}


</style>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".btn1").on('click',function(){
     $("p").hide();
     $(".text2").hide()
     $('body').css("background", "black");      
    });

});
</script>

<script>

//blink
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);

function toggle() {
    if(shown) {
        element.hide();
        shown = false;
    } else {
        element.show();
        shown = true;
    }
}
</script>

</head>
<body>

<p>This is a paragraph.</p>

</div>
     <div class="text2">
     -- : --
</div>  
<button class="btn1">online</button>



</body>
</html>

Answer 1

第二个脚本的内容应该在文档就绪处理程序中，否则代码会在该元素被解析到内存之前尝试找到并使用.text2元素。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: coral;
    color: white;
}

.text2{
  color: white;
  width: 100px;
  float: right;
  padding-top: 10px;
}


</style>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".btn1").on('click',function(){
      $("p").hide();
      $(".text2").hide()
      $('body').css("background", "black");      
    });
    
    var element = $(".text2");
    var shown = true;
    setInterval(toggle, 500);

    function toggle() {
     if(shown) {
        element.hide();
     } else {
        element.show();
     }
    shown = !shown;
  }

});
</script>

</head>
<body>
  <p>This is a paragraph.</p>
  <div class="text2">-- : --</div>  
  <button class="btn1">online</button>
</body>
</html>

Answer 2

第二个脚本必须在JQuery函数中。

$(document).ready(function(){
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);

function toggle() {
    if(shown) {
        element.hide();
        shown = false;
    } else {
        element.show();
        shown = true;
    }
}
    });

HTML工作表中的多个脚本之一不起作用

2 个答案: