Javascript 在“循环”下，如何根据基于索引值的条件分配事件_Javascript_Javascript Events

Javascript 在“循环”下，如何根据基于索引值的条件分配事件

javascript

Javascript 在“循环”下，如何根据基于索引值的条件分配事件,javascript,javascript-events,Javascript,Javascript Events,我有一个50个div的循环，在其中我根据当前元素分配事件。但是，我希望根据条件分配事件例如，div一个接一个地排列，就像照片堆栈一样。我希望用户首先点击第一个div，然后只有他们才能点击第二个div，然后第三个div，依此类推，直到他们到达div的末尾由于下面的代码，用户可以点击任何div并执行操作。但行动需要一个接一个地进行。一个接一个的跳水。请提出解决办法 var flag=0; var flipImage=document.querySelectorAll('.shadow');

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

例如，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);
     }
  }

var标志=0；
var flipImage=document.querySelectorAll（'.shadow'）；
对于（j=0；j试着给每个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>


试验
功能分区单击（事件）
{
var div_clicked=event.currentTarget，
next_sequence=parseInt（div_clicked.id.split（“”）[1]）+1，
next\u div=document.getElementById（“mydiv\u”+next\u序列）；
//警报仅用于测试
警报（div_.id）；
警报（下一部门id）；
div_clicked.removeEventListener（'click'，div_click，false）；
下一个div.addEventListener（'click'，div\u click，false）；
}
window.onload=函数（）
{
var first_div=document.getElementById（“mydiv_0”）；
第一个div.addEventListener（'click'，div\u click，false）；
};
单击0
单击1
点击2
点击3
点击4
点击5

值得一试吗？
试试这个：
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;
  }
}

var flipImage=document.querySelectorAll（'.shadow'），current=0；
函数倒转（）{
电流++；
当前=（当前>flipImage.length）？0：当前；
对于（j=0；j
可能类似于：
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);

当有任意数量的元素共享同一事件处理程序时，处理来自公共父级的所有事件通常比为每个元素分配处理程序要好
这对“焦点”或非冒泡事件不起作用，但对触摸、鼠标和键盘事件很有用
通常，根据常量“配电盘”处理程序的条件协调操作比根据任意元素协调操作更容易。我认为这不是OP想要的。是的，效果将按div的顺序执行，但单击哪个div并不重要。你是对的，但如果div放在e的顶部，它应该会起作用我完全同意你的回答更符合OP的问题啊，对不起，JCOC611，我忘了这个职位。你是对的，那没关系；）没关系！这个解决方案看起来很完美。但是，在当前的每个div上，我需要附加一个名为flip down的类，该类允许div向下翻转。当我尝试时，我得到了非常奇怪的动画。下面是我在flipdown函数中的代码。var obj=事件目标；对象className='flipDown'；我认为，类被分配给了mousevent，而不是实际的div。解决方案是什么？？？@user504023：你能用你的代码创建一个jsFiddle吗？仅此信息很难提供帮助，但看起来您以正确的方式附加了该类。非常感谢。事实上我有办法解决这个问题。我使用的是event.currentTarget，而不是event.target。这个现在很好用。你上面的代码对我帮助很大。再次感谢。
index = index % length;