单击N次后触发回调

问题描述 投票:-2回答:3

我是Java语言的新手,找不到我的问题的答案。如果您单击5次按钮,我的JavaScript是否有可能查看div?如果是这种情况,我怎样才能做到这一点?

谢谢!

javascript html button click show
3个回答
1
投票

没有jQuery:

document.addEventListener("DOMContentLoaded", function(event) {
   var button = document.getElementById('click_me');
   var elem = document.getElementById('message');
   var count = 0;

   button.addEventListener('click', function(e) {
       e.preventDefault();
       count++;
  
       if(count == 5){
           elem.style.display = 'block';
       }
    }, false); 
});
#message {
  background: #0f0;
  display: none;
  padding: 10px;
}
<button type="button" id="click_me">Click Me</button>
<div id="message">Hello World</div>

使用jQuery:

$(function() {
  var count = 0;
  
  $('#click_me').click(function(e) {
    e.preventDefault();
    count++;
    
    if(count == 5) {
      $('#message').show();
    }
  });
});
#message {
  background: #0f0;
  display: none;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="click_me">Click Me</button>
<div id="message">Hello World</div>

1
投票

var clicks = 0;

function myFunction() {
  clicks = clicks+1;
  if(clicks == 5){
    document.getElementById('target').style.display = 'block'; 
  }
}
<button onclick="myFunction()">Click me</button>
<div style="display:none;" id="target">You clicked 5 times</div>

1
投票

您需要这样吗?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
	n=1;
    $(".clickable").click(function(){
        if(n==5){
			alert("You clicked 5 times");
		}else{
		n++;
		}
    });
});
</script>
</head>
<body>
<button class="clickable">Click here 5 times</button>

</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.