基于光标值实现页面跳转的if/else语句问题求助

首先，咱们先拆解下你代码里的核心问题：

你设置光标时用的是：

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

但在判断逻辑里却只检查了：

if (cursor === "url(img/Shovel.png)")

这里的问题是严格相等的字符串不匹配——实际生效的cursor值是包含, pointer后缀的完整字符串，所以这个判断条件永远会返回false，导致代码走到else分支（或者因为浏览器对cursor的解析差异，让判断逻辑完全失效）。

而且通过样式属性来判断用户选中的工具并不可靠，因为不同浏览器对样式字符串的解析可能存在细微差异（比如自动给URL加引号、转成绝对路径等）。更稳妥的思路是用一个变量来跟踪当前选中的工具。

方案一：用变量跟踪选中工具（推荐） #

添加一个全局变量记录当前选中的工具，逻辑清晰且稳定：

// 全局变量，记录当前选中的工具，初始为null
let selectedTool = null;

// 选中铲子的函数
function selectShovel() {
  document.body.style.cursor = "url(img/Shovel.png), pointer";
  // 标记当前选中的是铲子
  selectedTool = "shovel";
}

// 点击田地的跳转函数
function changePage() {
  if (selectedTool === "shovel") {
    window.location.href = "Potato1.html";
  } else {
    // 未选中正确工具时的处理，可根据需求调整
    alert("请先选择铲子工具哦！");
    // 或者跳回初始页：window.location.href = "Potato0.html";
  }
}

这种方式完全不受浏览器样式解析差异的影响，能准确判断用户是否选中了目标工具。

方案二：修正cursor字符串的判断（临时兼容） #

如果你一定要通过cursor样式来判断，可以调整判断逻辑，确保匹配完整的样式字符串，或者用includes检查URL片段：

function changePage() {
  const cursor = document.body.style.cursor;
  
  // 方式1：完全匹配设置的完整字符串
  if (cursor === "url(img/Shovel.png), pointer") {
    window.location.href = "Potato1.html";
  } else {
    window.location.href = "Potato0.html";
  }

  // 方式2：检查是否包含铲子的URL片段（兼容部分浏览器解析差异）
  // if (cursor.includes("img/Shovel.png")) {
  //   window.location.href = "Potato1.html";
  // } else {
  //   window.location.href = "Potato0.html";
  // }
}

另外还要注意：确保changePage函数只绑定在田地背景图的点击事件上，而不是整个页面的点击事件，不然用户点任何区域都会触发跳转，这也可能是你遇到异常跳转的原因之一哦！

内容的提问来源于stack exchange，提问作者user9192911