Question

我在这个网站上进行过研究，但是我无法理解如何在jquery中使用事件监听器，所以在第二个或第四个上点击我的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 更新：我修改了代码，以便在适用元素中存储属性中的点击次数。

我希望它有所帮助。

如何使用事件监听器来启用顺序点击？

2 个答案: