javascript - 如何使齿轮在单击按钮时旋转，然后接受单击次数(设置次数)？

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

我正在尝试将clickCount函数与代码结合起来以在每次单击时旋转齿轮。因此，它既会旋转齿轮，又会增加/计数点击次数（从2值开始），因此单击按钮时，它将执行情况1（如果点击次数是4的倍数）或情况2（如果点击次数不是4的倍数）。但是我什至无法让齿轮旋转一次。由于某种原因，它正在创建第二个齿轮，而不是让我单击/旋转主齿轮。

如果有人可以在旋转部件方面为我提供帮助，那么我将为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>

最佳答案

我会尝试看看我是否理解


if (clickedCount%4===0)是4的倍数
保持一致-您具有内联点击和clickhandler，但是对任何输入的点击都过于笼统
您的HTML无效，button标签关闭得太早，整个内容也没有显示：

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>