Question

我有一个50个div的循环，其中我根据当前元素分配事件。但是我想根据条件分配事件。

例如，Divs是一个接一个地排列，就像照片堆栈一样。我希望用户首先击中第一个div，然后只有他们能够击中第二个div然后第三个div，依此类推，直到他们到达div的末尾。

由于以下代码，用户可以点击任何div并执行操作。但行动需要逐一进行。一个接一个的div。请提出解决方案。

var flag=0;
var flipImage=document.querySelectorAll('.shadow');  
   for(j=0; j<flipImage.length; j++){
   var currentFlipImage=flipImage[j];
      if(j==flag){
      flag++; 
      currentFlipImage.addEventListener('click',flipDown,false);
     }
  }

Answer 1

尝试为每个div提供一个顺序ID，然后将click事件按顺序添加到下一个

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function div_click(event)
{
  var div_clicked = event.currentTarget,
      next_sequence = parseInt(div_clicked.id.split("_")[1]) + 1,
      next_div = document.getElementById("mydiv_" + next_sequence);
  //alerts are just for testing here
  alert(div_clicked.id);
  alert(next_div.id);

  div_clicked.removeEventListener('click',div_click,false);
  next_div.addEventListener('click',div_click,false);
}

window.onload = function()
{
  var first_div = document.getElementById("mydiv_0");
  first_div.addEventListener('click',div_click,false);
};
</script>
</head>
<body>
<div id="mydiv_0">Click 0</div>
<div id="mydiv_1">Click 1</div>
<div id="mydiv_2">Click 2</div>
<div id="mydiv_3">Click 3</div>
<div id="mydiv_4">Click 4</div>
<div id="mydiv_5">Click 5</div>
</body>
</html>

值得一试？

Answer 2

试试这个：

var flipImage = document.querySelectorAll('.shadow'), current = 0;
function flipDown(){
   current++;
   current = (current > flipImage.length)? 0 : current;
   for(j = 0; j < flipImage.length; j++){
      flipImage[j].style.zIndex = (j == current)? 2 : 1;
   }
}
window.onload = function(){
  for(j = 0; j < flipImage.length; j++){
    flipImage[j].onmouseclick=flipDown;
  }
}

Answer 3

可能是这样的：

var _handler = null;
var images = document.querySelectorAll('.shadow');
var length = images.length;

function attachHandler(index) {
    if(_handler) {
        // remove the click handler from the previous image
        images[index-1].removeEventListener('click', _handler, false);
        _handler = null;
    }
    if(index < length) {
        var handler = function(event) {
            flipDown(event);
            attachHandler(index+1); // add the click handler to next image
        }
        images[index].addEventListener('click', handler, false);
        _handler = handler;  // capture reference for removal
    }
}

attachHandler(0);

这只在需要时生成并添加事件侦听器。

重要提示：querySelectorAll()的返回值为NodeList live 。这意味着只要您在此对象上调用length，就会重新评估列表（再次搜索元素），这会增加性能开销。因此，切勿在{{1}}循环中使用list.length。事先捕获for。

Working DEMO

如果你想让它循环进行，只需删除length语句（当然保留正文）并执行

if

Answer 4

如果您拥有共享相同事件处理程序的任意数量的元素，则处理来自公共父级的所有事件通常比为每个元素分配处理程序更好。

这不适用于“焦点”或非冒泡事件，但它对触摸，鼠标和键盘事件很有用。

通常更容易根据来自常量“交换机”处理程序的条件来协调动作而不是来自任意元素。

在循环下，如何根据索引值根据条件分配事件

4 个答案: