javascript.点击隐藏事件故障

javascript .hide on click event trouble

本文关键字：事件 故障 隐藏 javascript      更新时间：2023-09-26

<header data-role="header">
    <h1> TEA TIME </h1>
    <a href="#home" class="ui-btn ui-btn-icon-top ui-icon-back ui-btn-icon-notext">back</a>
</header>
<h1>Takes 3 Minutes</h1>
<p id="timedisp">120 Sec</p>
<div class="clock">
</div>
<a href="#" id="start">Start</a>
<a href="#" id="reset">Reset</a>
</section>

下面是控制我的计时器的html

function greenTea(){

设置持续时间var持续时间=120；

Insert the duration into the div with a class of clock
    $(".clock").html(duration + " sec");  

Create a countdown interval
    var countdown = setInterval(function () {
        // subtract one from duration and test to see
        // if duration is still above zero
        if (--duration) {
            // Update the clocks's message
            $(".clock").html(duration + " sec");
        // Otherwise
        } else {
             // Clear the countdown interval
            clearInterval(countdown);
            // set a completed message
            $(".clock").html("End Your Steep");  
        }
    // Run interval every 1000ms 
    }, 1000);
};

$("a#start").click(greenTea)
Why is the below not working? I am trying to get my p#timedisp to disappear when I click the a#start link.
$("p#timedisp").hide(("a#start").click()); 
$('#reset').click(function() {
    location.reload();
});

您的jQuery应该是：

$('#start').click(function(){
    $('#timedisp').hide();
})

您可以使用以下内容：

$(function() {
  $("p#timedisp").on('click', function() {
    //$("a#start").hide();
    alert('do hide');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="timedisp">120 Sec</p>

如果您包含jQuery库，它应该可以工作

<a id="start" href="#">CLICK ME</a>
<p id="timedisp">120 Sec</p>

<script>
$(function() { // DOM is now ready
    $("#start").click(function( event ) {
        event.preventDefault(); // Prevent default anchor behavior
        $("#timedisp").hide(); 
    });
});
</script>

这将适用于

 $('#start').on("click",function(){
     document.getElementById('timedisp').style.display = 'none';
      //post code
    })
相关文章：