gpt4 book ai didi

javascript - 隐藏()jquery不起作用

转载 作者:行者123 更新时间:2023-11-30 11:48:04 25 4
gpt4 key购买 nike

我想制作一个在一段时间后启动和停止的闹钟。所以我把 setInterval 放在代码中。我还想在闹钟响起时显示一条消息。为此,我在最后一个 div 中制作了一个文本,并通过 jQuery hide() 将其隐藏。在我的代码中,p.show 没有被 jQuery hide() 隐藏。

<!DOCTYPE html>
<html>

<head>
<title>My Rest Alarm</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>

<body>
<div class="container">
<div class="row">
<form class="form-inline">
<div class="form-group">
<label for="sel1">Alarm will ring after :</label>
<input type="text" class="form-control" id="minute"> minute
</div>
</form>
</div>

<div class="row">
<div class="alarm" style="display:none;"></div>
<button class="btn btn-success start"> Start </button>
<button class="btn btn-danger stop"> Stop </button>
</div>

<div class="row">
<center><p><b id="clock"></b></p></center>
</div>

<div class="row">
<p class="show">It's time to rest</p>
</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
$("p.show").hide();

//show clock
var myVar = setInterval(myTimer ,1000);
function myTimer() {
var d = new Date();
document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}

//start alarm
var alarm;
$("button.start").click(function(){
var alarmVal = $("input").val();
//console.log(alarmVal*60000);
$("p.show").delay(alarmVal*60000).fadeIn();
alarm = setInterval(function(){
//alert("Hello");
$('div.alarm').append("<audio autoplay><source src='http://soundbible.com/mp3/A-Tone-His_Self-1266414414.mp3' type='audio/mpeg'></audio>");
},
alarmVal*60000);
});

//stop alarm
$("button.stop").click(function(){
clearInterval(alarm);
$("p.show").fadeOut();
});
});
</script>
</body>

</html>

为什么不隐藏?

最佳答案

它不起作用,因为 Bootstrap 还使用类 .show 并设置样式

display : block!important;

在上面,!important 样式会覆盖内联样式。

要解决此问题,只需使用 .show 以外的类名即可>

关于javascript - 隐藏()jquery不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40272501/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com