我在通过按钮执行多个任务之一时遇到问题。该按钮执行三个任务中的两个(将它们隐藏在.(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>

最佳答案

要隐藏.text2,请使用setInterval清除clearInterval



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

关于javascript - 由按钮操作的多个任务之一将无法执行,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48971674/

10-11 11:04