将对象存储在 div 中并通过 Jquery 检索答案

【问题标题】：Store object in div and retrieve via Jquery将对象存储在 div 中并通过 Jquery 检索
【发布时间】：2019-02-05 13:32:57
【问题描述】：

我需要将 Javascript 对象存储到 div 中（或在生产中：许多 div）。它确实需要进入data-object="" 属性——我不想稍后通过$('div').data('object') 添加它。

下面的代码只返回"{"...我觉得我已经尝试了stringify和parse的每一种组合。

有人知道如何检索我的对象吗？

var Module = {
  
  div: function() {
    
    var object = {
      name: 'one',
      type: 'two'
    };
    
    var html = '<div data-object="' + JSON.stringify(object) + '"></div>';
    
    var div = $(html).appendTo('body');
      
    // This just returns "{" instead of my object
    console.log(div.data('object'));
    
  }
  
}


$(document).click(function() {
  Module.div();
})

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【问题讨论】：

你检查过元素，看看它产生了什么 HTML 明智的？
我认为您必须将这一行 var html = '<div data-object="' + JSON.stringify(object) + '"></div>'; 更正为 var html = '<div data-object=' + JSON.stringify(object) + '>inspect here</div>';

标签： javascript jquery html json object

【解决方案1】：

这是因为 JSON 使用双引号 " 进行编码，并且您还将其封装在双引号之间。问题在于它会产生：

<div data-object="{" name":"one","type":"two"}"></div>

所以，当您阅读data-object 时，它的值实际上是"{"。

尝试将其封装成简单的引号：

var Module = {
  
  div: function() {
    
    var object = {
      name: 'one',
      type: 'two'
    };
    
    var html = "<div data-object='" + JSON.stringify(object) + "'></div>";
    
    var div = $(html).appendTo('body');
      
    // This just returns "{" instead of my object
    console.log(div.data('object'));
    
  }
  
}


$(document).click(function() {
  Module.div();
})

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

现在输出有效：

<div data-object='{"name":"one","type":"two"}' ></div>

您还可以使用 jQuery 以编程方式设置属性：

var Module = {
  div: function() {
    var object = {
      name: 'one',
      type: 'two'
    };
    
    var div = $("<div>")
               .attr("data-object", JSON.stringify(object))
               .appendTo('body');
      
    console.log(div.data('object'));
  }
}


$(document).click(function() {
  Module.div();
})

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

你的输出：data-object="{"name":"one","type":"two"}"
但现在 sn-p 工作正常，输出正确。
我同意，但是如果你检查元素，输出就是我之前写的那个
但它确实有效。我添加了另一种解决方案，以编程方式设置属性，而不是连接字符串。

【解决方案2】：

替换var html = '<div data-object="' + JSON.stringify(object) + '"></div>';
与var html = '<div data-object=' + JSON.stringify(object) + '></div>';
无需添加额外的双引号

var Module = {
  
  div: function() {
    
    var object = {
      name: 'one',
      type: 'two'
    };
    
    var html = '<div data-object=' + JSON.stringify(object) + '></div>';
    
    var div = $(html).appendTo('body');
      
    // This just returns "{" instead of my object
    console.log(div.data('object'));
    
  }
  
}


$(document).click(function() {
  Module.div();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
</body>

【讨论】：