0

我正在为孩子们制作一个园艺游戏。用户点击他们需要的园艺工具（例如铲子），然后他们点击田地的背景图像，这将把他们带到下一步/页面（例如犁过的田地的背景图像）。将光标更改为工具图像的 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";
  }
}

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

4

1 回答 1

0

每当您单击时，以下将显示最新悬停框的位置：

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

于 2018-05-30T12:55:27.167 回答