如何使用事件侦听器启用顺序点击

Question

我在此站点上进行了研究，但是我很难理解如何在jQuery中使用事件听众，因此在 second 或第四上单击我的CSS上有什么变化？

换句话说，我知道如何在单击中更改某些内容，但是如何在第一次单击时进行操作，除了第二次点击时，它无能为力吗？

Answer 1

计数点击。

var click_count = 0;
$('#test').click(function() {
  click_count += 1;
  if (click_count == 2) {
    alert("second");
  } else if (click_count == 4) {
    alert("fourth");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test">Click me!</button>

如果您打算重复此操作，您将需要一个单独的变量，否则它将计算单击的任何内容。这是基于封闭的演示：

// Generalised function
function click_counter(element, func) {
  var click_count = 0;
  $(element).click(function(){
    click_count += 1;
    func.call(this, click_count);
  });
}
// Example use
click_counter($('#test1'), example);
click_counter(document.getElementById('test2'), example);
function example(clicks) {
  if (clicks == 2) {
    alert("Second click!");
  } else if (clicks == 4) {
    $(this).append("<br />Fourth click!");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test1">Click me!</button>
<button id="test2">Click me also!</button>

Answer 2

这是一个工作片段。
那是您想实现的事情吗？

var elms = document.getElementsByClassName("countclicks");
for (var i = 0; i < elms.length; i++) {
  elms[i].addEventListener('click', function(){
    colors_on_multiple_clicks(this);
  });
}
function colors_on_multiple_clicks(elm) {
  var clicks = 1 + (parseInt(elm.getAttribute("clicks")) || 0);
  elm.setAttribute("clicks", clicks);
  if (clicks == 2) {
    elm.classList.add("red");
  }
  if (clicks == 4) {
    elm.classList.remove("red");
    elm.classList.add("green");
  }
  if (clicks == 8) {
    elm.classList.remove("green");
    elm.classList.add("blue");
  }
  if (clicks == 12) {
    alert("You can stop now, I can't change color anymore!");
  }
  if (clicks == 16) {
    alert("I did warn you. I'm deleting myself!");
    elm.parentNode.removeChild(elm);
  }
}

.countclicks {
  margin: 10px 0;
  border: 1px solid black;
  padding: 10px 20px;
}
.red {
  background: #a44;
}
.green {
  background: #4a4;
}
.blue {
  background: #44a;
}

<div class="countclicks">
  <p>Click here, and again. And again…</p>
</div>
<div class="countclicks">
  <p>Click here, and again. And again…</p>
</div>

请注意，我没有使用jQuery。
更新：我修改了代码以将单击计数存储在适用元素中的属性中。

我希望它有帮助。