Javascript - 如何使用单击功能访问对象的属性

Question

这是我在 stackoverflow 上发表的第一篇文章，因此，如果我的问题不清楚，或者之前已经回答过这个问题，我深表歉意。我确实尝试过查看，但我认为我的问题是我不知道我做错了什么。

我目前有一个对象，如下所示:

var character = { name1: { info1: xx, info2: xx, ID: xx}, name2:  { info1: 
xx, info2: xx, ID: xx} }

我有一个可供其他人点击的图像，并且该图像的 ID 与对象 ID 相匹配。

我正在尝试将点击属性(ID)传输到一个变量，解析它，然后使用它来访问更完整的ID信息......就像这样:

var clickedOnId = $(this).attr("id");

function characterID() {
    var parseID = JSON.parse(clickedOnID)
    var accessID = character.name.parseID
    $(".div").html("<h2>" + accessID + "</h2>")
}

我知道点击正在记录ID(我已经console.log'ed它)，所以我知道点击正在从图像接收ID属性信息......所以问题与我的方式有关m 访问对象。我也尝试过不解析它，但这不起作用。有人对我能做什么有什么建议吗？

谢谢!

Answer 1

JSON.parse() 与此处无关。只是一个简单的测试，看看点击的 id 是否与对象 id 匹配。

var character = { 
   name1: { 
     info1: "x info", 
     info2: "more x info", 
     ID: "xx"
   }, 
   name2: {
     info1: "y data", 
     info2: "specific y info", 
     ID: "yy"
   }
};


$("div").on("click", function(){

  // Loop over objects
  for(var prop in character){

    // Test to see if we have an id match
    if(character[prop].ID === this.id){
        
        // Begin preparing output
        var ul = document.createElement("ul");
        
        // Loop over sub-object properties and produce output
        for(var subProp in character[prop]){
          var li = document.createElement("li");
          li.textContent = prop + "." + subProp + " = "  + character[prop][subProp]; 
          ul.appendChild(li);
        }
    
        $(".div").html(ul);

    }
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="yy">Try Me</div>
<div id="xx">Try Me</div>
<div class="div"></div>