按钮操作的多个任务之一不会执行

Question

我在通过按钮执行多个任务之一时遇到问题。该按钮执行三个任务中的两个（在 .(click) 时隐藏它们），除了最后一个任务，一个文本闪烁 javascript 功能。我看不出有什么可能是错误的！隐藏文本之前的语法与隐藏下一个文本的语法相同，但由于某种原因它不会隐藏它（闪烁的文本）。预先感谢您的帮助！

这是我的代码：

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

.text1{
 padding-left: 15px;
 color: white; 
 font-family: 'Orbitron', sans-serif;
 width: 250px;
 float: left;
 padding-top: 10px;
}


.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();
      $(".text1").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>
  <div class="text1">
  PRESS BUTTONS BELOW
  </div>
  <div class="text2">-- : --</div>  
  <button class="btn1">online</button>
</body>
</html>

Answer 1

要隐藏 .text2 使用 clearInterval

清除 setInterval

$(document).ready(function() {
  $(".btn1").on('click', function() {
    $("p").hide();
    $(".text1").hide();
    $(".text2").hide(function() {
      clearInterval(x)
    });
    $('body').css("background", "black");

  });

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

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


});

body {
  background-color: coral;
  color: white;
}

.text1 {
  padding-left: 15px;
  color: white;
  font-family: 'Orbitron', sans-serif;
  width: 250px;
  float: left;
  padding-top: 10px;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text1">
  PRESS BUTTONS BELOW
</div>
<div class="text2">-- : --</div>
<button class="btn1">online</button>

按钮操作的多个任务之一不会执行

One of Multiple Tasks Operated by Button Won't Execute

html

javascript

script-tag