hide（）jquery不工作

我想發出一段時間後開始和停止的鬧鐘。所以我把setInterval放在代碼中。另外，我想在鬧鈴響起時顯示一條消息。爲此，我在最後一個div中創建一個文本，並通過jQuery hide（）隱藏它。在我的代碼中，p.show不會被jQuery hide（）隱藏。hide（）jquery不工作

<!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>

爲什麼它不躲？

來源

2016-10-26 Townim Faisal

以外的類名你如何加載JS塊以上的HTML，它是用AJAX調用或某種動態加載的？ – jk121960

點擊「運行代碼片段」 - >點擊「開始」沒有填寫價值的行爲，出於好奇 - >幾乎嚇死了。錯誤報告：如果您在帶耳機的安靜房間，則無法正常工作。 – vlaz

@vlaz - 不是一個bug，預期的用例是嚇唬用戶死亡，儘管這不是一個很好的商業決策？ – adeneo

它不工作，因爲引導還使用了類.show並設置風格

display : block!important;

它，!important樣式覆蓋內聯樣式。

要解決此問題，只需使用比.show

來源

2016-10-26 21:42:37 adeneo

hide（）jquery不工作

回答

相關問題