创建 if/else 语句，以便根据光标值更改页面

Question

我正在为孩子们制作一个园艺游戏。用户单击他们需要的园艺工具（例如铲子），然后单击田地的背景图像，这将带他们进入下一步/页面（例如犁过的田地的背景图像）。将光标更改为工具图像的 javascript 函数工作正常。但是，我注意到任何点击时背景图像都会发生变化，这不是我想要的。只有当光标具有正确的值（即铲子）时，它才应该改变。

为了解决这个问题，我认为最好使用 if/else 语句形式的第二个函数。

<script>
 function myFunction() {

  document.body.style.cursor = "url(img/Shovel.png), pointer";

}

function changePage() {
  var cursor = document.body.style.cursor;

  if (cursor === "url(img/Shovel.png)") {
    window.location.href = "Potato1.html";
  } else {
    window.location.href = "Potato0.html";
  }
}

它没有像我想象的那样工作，页面自动切换到下一个。我想知道我的逻辑是否有意义，所以我会很感激一些指导。

Answer 1

点击后会显示最新的悬停框的位置：

var current = undefined;

document.body.addEventListener('click', fn, true);

$('#topLeft').hover(function(){
  current = 'topLeft'
})
$('#topRight').hover(function(){
  current = 'topRight'
})
$('#bottomLeft').hover(function(){
  current = 'bottomLeft'
})
$('#bottomRight').hover(function(){
  current = 'bottomRight'
})

function fn(){
  console.log(current)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="width:100px; height:100px;">
  <input id="topLeft" style="width:30px; height: 30px; background-color:green;" />
  <input id="topRight" style="width:30px; height: 30px; background-color:red;" />
  <input id="bottomLeft" style="width:30px; height: 30px; background-color:yellow;" />
  <input id="bottomRight" style="width:30px; height: 30px; background-color:blue;" />
</div>

对于您的具体问题，只需在有人点击工具时设置变量：

$('#shovel').click(function(){
    current = 'shovel'
})

然后在点击土壤时检查变量

$('#soil').click(function(){
    if(current === 'shovel')
        [whatever]
    else
        [whatever 2]
})

---

注意：

您将光标设置为"url(img/Shovel.png), pointer"，然后将其与"url(img/Shovel.png)" 进行比较。此时您是否尝试调试cursor 的值？

document.body.style.cursor = "url(\"img/Shovel.png\"), pointer";

console.log(document.body.style.cursor) // url("img/Shovel.png"), pointer

var result = (document.body.style.cursor === "url(\"img/Shovel.png\")")

console.log(result) // false

result = (document.body.style.cursor === "pointer")

console.log(result) // false

result = (document.body.style.cursor === "url(\"img/Shovel.png\"), pointer")

console.log(result) // true