如何在没有 json 的情况下从 jquery 数据属性中获取对象名称值

Question

>我可以通过jquery获取数据属性信息，如下所示：

<div id="test" data-info="color:blue,device:tablet,fruit:apple">click me</div>
$("#test").click(function(e){
var info = $(this).data("info");
alert("info: "+info);
//info: color:blue,device:tablet,fruit:apple
});

但是我需要像这样使用该信息数据：(我猜像数组对象？

color = info["color"];
device = info["device"];
fruit = info["fruit"];
alert ("color: "+color+" device: "+device+" fruit: "+fruit);

这个例子是我需要的：

info = {color:"blue", device:"tablet", fruit:"apple"};
color = info["color"];
alert("color: "+color);
//color: blue

所以我确实尝试过这样做;(但我得到未定义的错误(

<div id="test" data-info="{color:"blue", device:"tablet", fruit:"apple"}">click me</div>
$("#test").click(function(e){
var info = $(this).data("info");
color = info["color"];
alert("color: "+color); //color: undefined
});

我该怎么做？

请注意：我不想使用 json 数据，我需要像这样保持纯数据信息区域：{color:"blue", device:"tablet", fruit:"apple"}或者如果可能的话没有 { 和 } 字符。

我很抱歉我的英语不好，如果我使用了错误的标题或问题描述，您可以对其进行编辑。

Answer 1

如果值很简单并且不包含嵌套对象，则可以使用以下代码：

$("#test").click(function(e) {
let info = $(this).data("info");
let object = {};
info.split(",").forEach((elem) => {
const el = elem.split(":");
object[el[0]] = el[1];
})
console.log(object);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test" data-info="color:blue,device:tablet,fruit:apple">click me</div>

或者，您可以使用.data()方法代替 data-* 属性来存储对象。

Answer 2

试试这段代码：

$("#test").click(function(e){
var dat = $(this).data("info").split(',');
var info = {};
$.each( dat, function(index,value){
var p = value.split(':');
info[p[0]]=p[1];
});
console.log(info['color']);
});

这是jsfiddle：https://jsfiddle.net/pcnzLeyf/4/