Javascript 从JSON属性中删除双引号

我正在尝试使用hopscotch.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"
        }
      ]
    };

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

将巡更步骤直接放入JavaScript库非常有效，但理想情况下，我希望能够将所有这些细节保存在数据库中，并使用AJAX将数据传递到hopsocch.js。（这样可以动态创建巡演，

内容可以在不发布代码的情况下更改）

除了我的
目标
正在使用
document.querySelector（）
元素选择器外，一切正常

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

// 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"
        }
      ]
    };

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 Developer工具查看页面时会出现以下错误：

语法错误，无法识别的表达式：document.querySelector（“.btn primary”）

通过查看已返回到页面的JSON数据，我可以看到我的

document.querySelector（）

周围的双引号导致了问题

当我通过

document.querySelector（）

指定

目标时，我需要从我的
目标中删除这些双引号，但当我基于HTML标记（如
标题
）指定
目标时，将保留双引号

有什么想法可以实现这一点吗？
在提供的示例中，主要问题是您使用的是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"
        }
    }
};

var-tour=new
{
Id=“你好，跳房子”，
步骤=新列表
{
新步骤
{
Title=“我的标题”，
Content=“这是我的页面标题。”，
目标=新MockTourStep.TargetC
{
Type=MockTourStep.TargetType.ElementName，
Value=“header”
},
Placement=“底部”
},
新步骤
{
Title=“我的内容”，
Content=“这里是我放置内容的地方。”，
目标=新MockTourStep.TargetC
{
类型=MockTourStep.TargetType.QuerySelector，
Value=“document.querySelector（'#content p'）”
},
Placement=“底部”
}
}
};

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

$.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);
});

$.getJSON（“url”，函数（教程）{
对于（var i=0；i

请注意
eval
用于
QuerySelector
。使用
eval
是危险的，因此您需要检查您为客户端提供的服务。
您是否尝试使用JSON.stringify将javascript值转换为JSON字符串？在上面的JavaScript中，您实际上是在传递
document.querySelector（）的结果作为target的值，这真的是您想要的吗？如果可能，我想用我的C#处理双引号服务器端@DavidG-是的，我希望能够将
document.querySelector（）
作为值传递（当然，要选择的元素在括号内：-））@collapsar-不幸的是，在C#中，所有字符串都需要在双引号中定义。问题是这些C#双引号在到达客户端JavaScript时会给我带来问题。@Stu1986C我不确定你是否完全理解我的意思。Javascript传递的是HTML元素（在本例中是
p
标记），而不是字符串
document.querySelector（…）
。这就是你想要的吗？@Stu1986C我摸索了一下，除了使用javascript
eval
，没有其他选择。谢谢Aleksandr。这个逻辑对我来说是有道理的。我会很快试一试，并让你知道它是否对我有效：）有效。谢谢Aleksandr！我唯一需要修改的代码就是switch语句；用各自的枚举整数替换字符串。请注意，我使用了
JsonConverter（typeof（StringEnumConverter））
属性。在本例中，该值将被序列化为枚举字符串表示形式。我也有这个表示形式，但它没有将枚举作为字符串发送。这很奇怪，因为它在我的测试项目中起作用。我认为您应该尝试手动序列化您的模型来测试它。