Question

我是Javascript的新手，我无法找到问题的答案。如果您点击按钮5次，我的javascript是否可能会查看div？如果是这种情况，我该如何做到这一点？

谢谢！

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

Answer 2

你需要这样吗？

      if (proto.hasOwnProperty(name)) {
         !(specPolicy === SpecPolicy.DEFINE_MANY || specPolicy === SpecPolicy.DEFINE_MANY_MERGED) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'ReactClassInterface: You are attempting to define ' + '`%s` on your component more than once. This conflict may be due ' + 'to a mixin.', name) : invariant(false) : undefined;
      }

Answer 3

没有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>

Answer 4

只需少量的功能组合，即可制作通用的点击处理程序功能，以模仿真实的“ dblclick”的行为方式，但可以自定义N次点击。

const buttons = document.querySelectorAll('button')

const onClick = (requiredClicks, timeLimit = 300) => cb => {
  let timer;
  let clicked = 0;
  
  return e => {
    // each time clicked, check if reached the goal
    if( ++clicked == requiredClicks ){
      cb(e)
      clicked = 0
    }
    
    clearTimeout(timer)
    timer = setTimeout(() => 
      clicked = 0 // reset the number of clicks after a traditional 300ms duration
    , timeLimit)
  }
}

// bind events to all buttons, by their index, which controls the number of clicks 
[...buttons].forEach(
  (button, idx) => button.addEventListener(    "click", onClick(idx + 1)(callback)    )
)

// call this callback after N clicks (depending on the button in the demo)
function callback(e){
  console.clear()
  console.log("clicked on button at index", e.target.name)
}

<h2>Click fast:</h2>
<button name='1'>Click once</button>
<button name='2'>Click twice</button>
<button name='3'>Click 3 times</button>
<button name='4'>Click 4 times</button>

点击几下，Javascript显示div

4 个答案: