Question

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

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

Stream

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

Answer 1

以下内容会在您点击时显示最新悬停框的位置：

＆＃13;

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)
}

＆＃13;

<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>

＆＃13;

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

$('#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的值？

＆＃13;

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

＆＃13;

创建if / else语句，使页面更改基于游标值

1 个答案: