从 JSON 属性中删除双引号

Question

我正在尝试使用跳房子.js创建一个交互式游览。JavaScript 库需要游览才能工作的标准数据结构如下：

// Define the tour!
var tour = {
id: "hello-hopscotch",
steps: [
{
title: "My Header",
content: "This is the header of my page.",
target: "header",
placement: "right"
},
{
title: "My content",
content: "Here is where I put my content.",
target: document.querySelector("#content p"),
placement: "bottom"
}
]
};

将游览步骤直接放入 JavaScript 库中效果很好，但理想情况下，我希望能够在数据库中保存所有这些细节，并使用 AJAX 将数据传递到跳房子.js。(这样就可以动态创建游览，并且可以在没有代码发布的情况下更改content)。

除了我的target使用document.querySelector()元素选择器之外，一切正常。

每个演示步骤的基本 C# 模型如下所示：

public class MockTourSteps
{
public string Title { get; set; }
public string Content { get; set; }
public string Target { get; set; }
public string Placement { get; set; }
}

由于Target是一个字符串，我必须用双引号传递值。

这样做的问题是，当它被序列化为 JSON 时，在使用 Chrome 开发人员工具查看页面时，会出现以下错误：

Syntax error, unrecognized expression: document.querySelector(".btn-primary")

浏览已返回到页面的 JSON 数据，我可以看到我的document.querySelector()周围的双引号导致了问题。

当我通过document.querySelector()指定target时，我需要从target中删除这些双引号，但是当我基于 HTML 标记(例如header)指定target时，双引号将保留。

有什么想法吗？

Answer 1

主要问题是在提供的示例中，您使用的是javascript对象，但您将从服务器获取JSON。您将需要在客户端使用某种 JSON 处理。

我认为您可以在模型中添加更多信息：

public class MockTourStep
{
public string Title { get; set; }
public string Content { get; set; }
public TargetC Target { get; set; }
public string Placement { get; set; }
public enum TargetType
{
ElementName,
QuerySelector
}
public class TargetC
{
[JsonConverter(typeof(StringEnumConverter))]
public TargetType Type { get; set; }
public string Value { get; set; } 
}
}

和示例响应：

var tour = new
{
Id = "hello-hopscotch",
Steps = new List<MockTourStep>
{
new MockTourStep
{
Title = "My Header",
Content = "This is the header of my page.",
Target = new MockTourStep.TargetC
{
Type = MockTourStep.TargetType.ElementName,
Value = "header"
},
Placement = "bottom"
},
new MockTourStep
{
Title = "My content",
Content = "Here is where I put my content.",
Target = new MockTourStep.TargetC
{
Type = MockTourStep.TargetType.QuerySelector,
Value = "document.querySelector('#content p')"
},
Placement = "bottom"
}
}
};

然后，在客户端，您可以检查目标类型并将其设置为有效值：

$.getJSON("url", function (tour) {
for (var i = 0; i < tour.steps.length; i++) {
var step = tour.steps[i];
switch (step.target.type) {
case "ElementName":
step.target = step.target.value;
break;
case "QuerySelector":
step.target = eval(step.target.value);
break;
default:
throw Error;
}
}
hopscotch.startTour(tour);
});

请注意eval用于QuerySelector。使用eval是危险的，因此您需要检查您向客户提供的服务。