под циклом, как назначить событие в зависимости от условия на основе значения индекса - PullRequest
Новая
       1

под циклом, как назначить событие в зависимости от условия на основе значения индекса

0 голосов
/ 08 декабря 2010

У меня есть цикл из 50 делений, в котором я назначаю событие на основе текущего элемента.Однако я хочу назначить событие на основе условия.

Например, элементы 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);
     }
  }

Ответы [ 4 ]

0 голосов
/ 08 декабря 2010

Если у вас есть произвольное количество элементов, которые используют один и тот же обработчик событий, обработка всех событий от общего родителя обычно лучше, чем назначение обработчиков для каждого элемента.

Это не работает для событий «фокус» или «не пузырьков», но полезно для событий касания, мыши и клавиатуры.

Обычно легче координировать действия на основе условий из постоянного обработчика 'switchboard', чем из произвольных элементов.

0 голосов
/ 08 декабря 2010

Попробуйте это: 

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;
  }
}
0 голосов
/ 08 декабря 2010

Может быть что-то вроде: 

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 для этого объекта, список переоценивается (элементы снова ищутся), что увеличивает производительность. Таким образом, никогда не используйте list.length в цикле for. Захватите length заранее.

Рабочая ДЕМО

Если вы хотите, чтобы это происходило в цикле, просто удалите оператор if (сохраните тело, конечно) и выполните 

index = index % length;
0 голосов
/ 08 декабря 2010

Попробуйте присвоить каждому div последовательный идентификатор, а затем добавить событие 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>

стоит выстрел?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...