如何让齿轮在单击按钮时旋转，然后在单击设置次数后接受？

Question

我正在尝试创建一个基本的旋转齿轮拼图（只有一个齿轮）。每次单击时，齿轮都会旋转 90 度。有一个单独的按钮可以输入该答案以检查是否正确。如果齿轮旋转到错误的位置并单击了按钮，则用户将返回到之前的 url。如果齿轮旋转到正确的位置，然后单击按钮，位置将更改为第二个 url。

我正在尝试将 clickCount 函数与代码相结合，以便在每次点击时旋转齿轮。所以它既会旋转齿轮，也会旋转 add/count 次点击（从值 2 开始），所以当单击按钮时，它将执行情况 1（如果点击是 4 的倍数）或情况 2 （如果点击次数不是 4 的倍数）。但我什至无法让齿轮旋转一次。出于某种原因，它正在创建第二个齿轮而不是让我 click/rotate 成为主要齿轮。

如果有人可以帮助我解决旋转部分，那么我将为 clickCount 位创建一个新问题，因为每个部分都是一个特定的问题。但我把它放在这里供参考。

$('input').click(function() { //* When user clicks on first image //
  var img = document.getElementById("innercog"); // *select second img which is id "innercog" //
  if (img.hasClass('north')) { //* if second image has class "north", rotate... and so on *//
    img.attr('class', 'west');
  } else if (img.hasClass('west')) {
    img.attr('class', 'south');
  } else if (img.hasClass('south')) {
    img.attr('class', 'east');
  } else if (img.hasClass('east')) {
    img.attr('class', 'north');
  }
});

// Counts the number of times cog is clicked and stores it as n 
var clickCount = 2;

function clickHandler() {
  clickCount + 1; /* start with value of 2 and add 1 each time cog is rotated/clicked */
  missing code here /* Store clickCount value as n */
}

// 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 
jQuery(document).ready(function() {
  $('#multiclick').click(function() {
    multiclick();
  });
});

var clickedCount = n; /* pull this value from the above function */

function multiclick() {
  if (clickedCount == multiple of 4) {
    window.location.href = "entranceroom.html";
  } else {
    window.location.href = "maindoor.html"; /* go to next page */
  }
}

.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 */
}

<script src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">
</script>
<div id="wrapper" div class="toshow" style="display:none;">
  <!-- div class added for fade in content -->
  <div style="position:relative;top:0px;left:0px;">
    <img src="doorpuzzle1b.png" style="position:absolute" width="980" height="650" alt="Maindoor" />
  </div>

  <!-- Button to return to main door -->
  <div id="enterbutton" style="position:relative;top:260px;left:20px">
    <a href="maindoor.html"><img src="cogarrowleft.png" alt="Courtyard" width=97 height=97 border=0></a>
  </div>

  <!-- Button to rotate cog -->
  <div style="position:relative;top:41px;left:311px">
    <img class="north" id="innercog" src="innercog.png" onclick="clickHandler()" width=370 height=370 border=0><input type="image" src="innercog.png">
  </div>

  <!-- Button to try unlocking door cog -->
  <div id="tryunlock" style="position:relative;top:41px;left:311px">
    <button type=button onclick="multiclick()" alt="" style="width:97px; height:97px; border:0; background-color:red;" /> </button>
  </div>

Answer 1

我会试试看我是否理解

if (clickedCount%4===0)是4的倍数
保持一致 - 您有一个内联点击和一个点击处理程序，但有一个过于通用的点击任何输入
你的HTML是无效的，按钮标签关闭得太早而且整个事情都有display:none

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++; // we 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,"Entrance"); // remove the next comment when happy
      // window.location.href = "entranceroom.html";
    } else {
      console.log(clickedCount,"maindoor"); // remove the next comment when happy
      // window.location.href = "maindoor.html"; /* go to next page */
    }
  });
});

.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 */
}

<script src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">
</script>
<div id="wrapper" class="toshow">
  <!-- div class added for fade in content -->
  <div style="position:relative;top:0px;left:0px;">
    <img src="doorpuzzle1b.png" style="position:absolute" width="980" height="650" alt="Maindoor" />
  </div>

  <!-- Button to return to main door -->
  <div id="enterbutton" style="position:relative;top:260px;left:20px">
    <a href="maindoor.html"><img src="cogarrowleft.png" alt="Courtyard" width=97 height=97 border=0></a>
  </div>

  <!-- Button to rotate cog -->
  <div style="position:relative;top:41px;left:311px">
    <img class="north" id="innercog" src="innercog.png" width=370 height=370 border=0><input type="image" src="innercog.png">
  </div>

  <!-- Button to try unlocking door cog -->
  <div style="position:relative;top:41px;left:311px">
    <button id="tryunlock" type="button" style="width:97px; height:97px; border:0; background-color:red;">Open</button>
  </div>
</div>

如何让齿轮在单击按钮时旋转，然后在单击设置次数后接受？

How to get a cog to rotate on button click, then accept if clicked set number of times?

html

javascript

css

rotation

button