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を使っています）ので、クリックが画像からID属性情報を受け取っていることを知っています...問題はどうやってオブジェクトにアクセスしているのですか？私もそれを解析してみましたが、うまくいきません。誰も私ができることに対して何か提案がありますか？

ありがとうございました！

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>

Answer 2

そのないあなたがachiveしようとしているものを非常に明確。

function characterID() { 
    var accessID = character["name" + clickedOnID]; 
    $(".div").html("<h2>" + accessID + "</h2>") 
} 

しかし、それはあなたに"<h2>[object Object]</h2>"を与えるでしょう。だからおそらく$(".div").html("<h2>" + accessID.ID + "</h2>")または他のいくつかのプロパティが必要です。

また、画像をクリックすることは、アクセシビリティのために非常に良いアイデアではありません。