javascript .click事件发生故障时隐藏

Question

<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 duration = 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();
});

Answer 1

您的jQuery应该是：

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

Answer 2

您可以按照以下方式使用：

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

Answer 3

如果您包括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>

Answer 4

这会工作

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