Цикл for с пошаговой итерацией на javascript

323
04 мая 2017, 14:49

Подскажите, как исправить код, чтобы при каждом клике по btn_refresh запускался цикл и в консоле выводился результат. Т.е. первый клик > выводит "one", второй клик > выводит "two", третий клик > выводит "three".

В данный момент выводятся одновременно 3 варианта.

    var btn_refresh=$("#review__content__refresh"),
        fullReviewArray=[0,1,2];
    btn_refresh.click(function(){  
      for(var i = 0; i < 3; i++) 
    {if(i==0){
             console.log("one");
    }
    else if(i==1){
             console.log("two");
    }
    else if(i==2){
             console.log("three");
    } 
    }//конец for
    });//конец click to btn_refresh
Answer 1

Непонятно, зачем цикл.

var btn_refresh = $("#review__content__refresh"); 
btn_refresh.click(function() { 
  var counter = this.clickCounter; 
  if (counter) 
    this.clickCounter = counter + 1; 
  else 
    this.clickCounter = 1; 
 
  switch (this.clickCounter) { 
    case 1: 
      console.log("one"); 
      break; 
    case 2: 
      console.log("two"); 
      break; 
    case 3: 
      console.log("three"); 
      break; 
    default: 
      console.log("not in [1,2,3]"); 
  } 
}); //конец click to btn_refresh
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button id="review__content__refresh">Refresh</button>

Answer 2

Можно еще и так:

'use strict'; 
function* num() { 
  var values = ['one', 'two', 'three']; 
  var i = 0; 
  while (i < 3) { 
    yield values[i]; 
    i++ 
  } 
} 
 
function showNext() { 
  console.log(iterator.next().value); 
} 
 
const iterator = num();
<input type="button" value="click me" onclick="showNext();"/>

Answer 3

на native js если интересно с использованием делегирования событий - http://codepen.io/tokamame/pen/rmzzOK?editors=1010

document.addEventListener("load", onLoad()); 
 
var but = document.getElementById('button'); 
var clear = document.getElementById('clear'); 
var out = document.getElementById('output'); 
var counter = 1; 
 
function onLoad() { 
  document.addEventListener("click", showClick); 
} 
 
function showClick(e) { 
  if (e.target.innerHTML === "Кликни меня") { 
    out.innerHTML = 'Вы нажали на кнопку "Кликни меня" ' + counter + ' раз'; 
    counter++; 
  } else if (e.target.innerHTML === "Очистить счетчик") { 
    out.innerHTML = 'Вы ни разу ни кликали'; 
    counter = 1; 
  } else { 
    console.log('Что-то пошло не так'); 
  } 
}
<button id="button">Кликни меня</button> 
<button id="clear">Очистить счетчик</button> 
<div id="output">Вы ни разу ни кликали</div>

READ ALSO
Анимация сжатия и расжатия мяча на js

Анимация сжатия и расжатия мяча на js

Есть мяч и 3 поверхности(бетон, дерево, ткань), мы задаем силу с которой он полетит внизНужны формулы для расчета сжатия и расжатия мяча

236
Почему данный код на JQuery не работает?

Почему данный код на JQuery не работает?

Нервничаю уже час, только начал изучать JQuery и тут такая ситуация, что код не работаетПочему?

234
Удаление курсива при выделении жирным

Удаление курсива при выделении жирным

Помогите, пожалуйста: при нажатии на кнопку "Заменить курсив полужирным начертанием" курсив после выделения жирным должен удалятьсяСейчас...

376