Как заставить функцию clickcount начинаться с номера, отличного от 0

Question

У меня есть изображение, которое вращается и считает клики одновременно.Пользователь должен повернуть изображение в правильное положение, а затем отправить этот ответ, чтобы перейти на следующую страницу.В зависимости от общего количества кликов на первом изображении (проверяется с помощью функции clickedcount), нажатие второй кнопки приведет к переходу к одному из двух URL.

У меня есть изображение, которое можно поворачивать при нажатии с помощью CSSпреобразования.У меня также есть функция clickedcount, которая подсчитывает количество кликов, а затем вторая кнопка корректно реагирует на один из URL-адресов в зависимости от этого общего количества.Однако мне нужно начать отсчет с 2, а не с 0, так как это первая правильная позиция изображения.Тогда каждый полный оборот после этого (кратный 4) также будет принят как правильный.Таким образом, итоговые значения clickcount равны 2, затем 6, 10, 14, 18, 22 и т. Д.

Изменение начального значения clickedcount в первой функции приводит к принятию вышеуказанных правильных итоговых значений.Тем не менее, он также поворачивает изображение еще 2 раза при первом щелчке (что не должно).Я предполагаю, что мне нужно изменить бит 'if (clickedCount% 4 === 0)', чтобы эффективно добавить 2 к начальному итогу, но пока все варианты, которые я пробовал, не работали.

Пока что самое близкое, что у меня есть, это:

'if (clickedCount = 2 || 2 + (% 4 === 0))'

если количество кликов равно 2 ИЛИ 2 +, кратному 4

Но это совсем не принимается (прекращает вращаться полностью).Я не уверен, где я иду не так здесь!Я новичок в javascript, поэтому, вероятно, упустил что-то очень очень очевидное: (

JS:

<script src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"></script>
<script>
// Rotate cog when clicked
var directions = ["north", "west", "south", "east"],
    clickedCount = 0;
$(function() { // on page load
    $('#innercog').click(function() { //* When user clicks on first image //
    $(this).removeClass(directions[clickedCount % 4]);
    clickedCount++; // do not reset, just keep adding
    $(this).addClass(directions[clickedCount % 4]);
    console.log(clickedCount,directions[clickedCount % 4]);
});

// When tryunlock button is clicked, checks if stored clicks value is a multiple of 4 and navigates to one of the two urls depending if correct
$("#tryunlock").on("click", function() {
    if (clickedCount % 4 === 0) {
    console.log(clickedCount,"Entranceroom");
    window.location.href = "entranceroom.html";
    } else {
    console.log(clickedCount,"maindoor");
    window.location.href = "maindoor.html"; /* go to next page */
    }
});
});
</script>

CSS:

.north {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg); /* Safari / Chrome */
}
.west {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg); /* Safari and Chrome */
}
.south {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg); /* Safari and Chrome */
}
.east {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg); /* Safari and Chrome */
}

Answer 1

просто измените строку кода

 clickedCount = 0;

на

  clickedCount  = 2;

Новый код:

<script>
// Rotate cog when clicked
   var directions = ["north", "west", "south", "east"],
    clickedCount = 2;
     ....

Что касается оператора сравнения, упомянутого в OP

это будет

if ((clickedCount == 2) || (((clickedCount + 2) % 4) == 0)) 

---

Другой способ сделать что-то:

Используя свойство стиля javascript, вы можете напрямую изменять любой элемент преобразования любого объекта.

В сочетании с несколькими пользовательскими атрибутами вы можете установить серию блокировок без написания повторяющегося кода.

function rotateLock(image) {

  // create the rotation and clicks properties attached to the div
  var cl = document.createAttribute("clicks");

  var clrot = document.createAttribute("rotation");


  // increase 'clicks' by 1
  cl.value += 1;
  image.attributes.setNamedItem(cl);


  // increase rotation by 90
  clrot.value = Number(image.attributes.getNamedItem("rotation").value) + 90;
  while (clrot.value > 360) { clrot.value -= 360; }
  image.attributes.setNamedItem(clrot);


  // set transform 
  image.style.transform = "rotate(" + image.attributes.getNamedItem("rotation").value + "deg)";


  // check if rotation matches  the 'endRotation' value annd 'clicks' is > 0
  if ((cl.value > 0) && (clrot.value ==  image.attributes.getNamedItem("endRotation").value)) {
  image.innerHTML = "<br><br><p style='color: white'>UNLOCKED!</p><br><br>";
    

  } else {
  
  image.innerHTML = "<br><br>LOCKED!<br><br>";
    
  }
}

<DOCTYPE html>

<table><tr><td>  <div id="imageLock" style="transform: rotate(90deg); width: 150px; height: 150px; background-color: green; border-radius: 30px 30px 30px 30px" clicks="0" rotation=0 endRotation="360" onClick="rotateLock(document.getElementById('imageLock'));">
<center>
   LOCKED
    </center>
  </div>
</td><td>
  <div id="imageLock2" style="transform: rotate(90deg); width: 150px; height: 150px; background-color: green; border-radius: 30px 30px 30px 30px" clicks="0" rotation=0 endRotation="180" onClick="rotateLock(document.getElementById('imageLock2'));">
  <p><center>
   LOCKED
    </center></p>
  </div>
</td></tr></table>

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

Не уверен, насколько это поможет ... но это может кому-то помочь однажды.