Question

我需要将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();
})

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

Answer 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();
})

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

现在输出有效：

<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();
})

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

Answer 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>

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

2 个答案: