Question

我正在制作一张美国的SVG地图，其中大部分内容已经完成，所有内容都归结为一个简单的if else声明，以便我可以完成。目标是如果我点击一个州（我有每个州的路径和ID），会弹出一个提示，询问州名。然后，如果我在提示中输入的答案是正确的，那么jQuery代码应该填充状态为绿色，如果不正确则为红色。当我在提示中输入内容时它会填充红色，但是每次都会这样做，即使提示正确也是如此。我怎么能解决这个问题，今天我需要快速回答。这是jsfiddle https://jsfiddle.net/vnqcyu90/

 jQuery(function($) {
$('path').click(function() {
  prompt("Enter State Initials")
  if ($('path id') == prompt) {
    this.style.fill = "green";
  } else {
    this.style.fill = "red";
  }



});

}）;

这是导致我问题的特定代码行，它将onclick函数添加到SVG映射，以及处理与提示相关的if else语句，询问状态名称，在我的情况下是路径id 。（此代码是jQuery 1.7.1）

Answer 1

您的代码存在一些问题。

首先，您没有将Window.prompt()的结果分配给任何内容。你需要这样做：

var prompt = window.prompt("Enter State Initials");

下一个问题是你的jQuery选择器

$('path id')

jQuery选择器返回与选择器字符串匹配的元素列表。在这种情况下，您要求它返回所有具有祖先<id>元素的名为“id”（即<path>）的元素。

如果要检查单击路径的id值，那么您需要做的是：

$(this).get(0).id

$(this)将单击的元素转换为jQuery对象。 get(0)获取jQuery对象的第一个元素（记住jQuery选择器总是返回一个列表）。但是，在这种情况下，列表中只会有一个元素。

您只需引用元素的id属性即可读取元素的id属性。

所以你的最终代码如下：

var prompt = window.prompt("Enter State Initials")
if ($(this).get(0).id == prompt) {
  this.style.fill = "green";
} else {
  this.style.fill = "red";
}

由于您的所有州ID都是大写的，您可能还想转换人们输入的文本。例如：

var prompt = window.prompt("Enter State Initials").toUpperCase();

Updated fiddle

我将onClick提示附加到SVG图像，但我无法获得运行jQuery if else语句的提示

1 个答案: