由按钮操作的多个任务之一将无法执行 [英] One of Multiple Tasks Operated by Button Won't Execute
本文介绍了由按钮操作的多个任务之一将无法执行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在通过按钮执行多个任务之一时遇到问题.该按钮执行三个任务中的两个(将它们隐藏在.(click)上)，最后一个除外，这是一个文本闪烁的javascript函数.我看不出有什么可能是错误的！在隐藏文本之前使用相同的语法来隐藏下一个文本，但是出于某种原因，它不会将其隐藏(闪烁的文本).预先感谢您的帮助！
I'm having problems with one of multiple tasks being executed by a button. The button executes two of three tasks (hides them upon .(click)), except the last one, a text-blinking javascript function. I can't see what can be possibly wrong! The same syntax to hide the text before it is the same syntax used to hide the next one, but for some reason it won't hide it (the blinking text). Thanks in advance for your help!
这是我的代码:
<!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，请使用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>
这篇关于由按钮操作的多个任务之一将无法执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
