クリック時の連想配列の表示要素

Question

私はdivの要素が4つあり、配列には4つの要素があります。

ユーザーが最初にdiv要素（class .news）をクリックすると、配列の最初の要素の「値」がdiv #selectedNewsの内部に表示されます。

Here's my code

私の問題は、私はdiv要素と、配列の要素を関連付ける方法を理解していないということです。再び

コード：あなたが表示したい配列項目のインデックスを知っておく必要があり

var newsListData = [ 
 
    { 
 
\t  "group" : "science", 
 
\t  "title" : "Text 1", 
 
\t  "image" : "images/news1.jpg", 
 
\t  "content" : "Text text text" 
 
\t }, 
 
\t { 
 
\t  "group" : "science", 
 
\t  "title" : "Text 2", 
 
\t  "image" : "images/news2.jpg", 
 
\t  "content" : "Text text text" 
 
\t }, 
 
\t { 
 
\t  "group" : "science", 
 
\t  "title" : 'Text 3', 
 
\t  "image" : "images/news3.jpg", 
 
\t  "content" : "Text text text" 
 
\t }, 
 
\t { 
 
\t  "group" : "economics", 
 
\t  "title" : 'Text 4', 
 
\t  "image" : "images/news4.jpg", 
 
\t  "content" : "Text text text" 
 
\t }] 
 

 

 

 

 
var selected; 
 
function elem() { 
 
    selected.innerHTML = ""; 
 
    for (var i = 0; i < this.children.length; i++) { 
 
    selected.appendChild(this.children[i].cloneNode(true)); 
 
    } 
 
} 
 

 
document.addEventListener("DOMContentLoaded", function() { 
 
    var selectedNews = newsListData​ /* stuck HERE */ 
 
    for (var i = 0; i < selectedNews.length; i++) { 
 
    selectedNews[i].addEventListener("click", elem); 
 
    } 
 
    selected = document.getElementById("selectedNews") 
 
});

#selectedNews { 
 
    border : 1px solid gray; 
 
    margin : 10px; 
 
    padding : 5px; 
 
} 
 

 
.news{ 
 
    background-color : green; 
 
    border : 2px solid black; 
 
    padding : 4px; 
 
    margin-top : 2px; 
 
    text-align : center; 
 
}

<div id="newsList"> 
 
<input type="text" placeholder="filter..." id="filter"/> \t 
 
\t <div class="list"> 
 
\t <div id="0-news" class="news">One</div> 
 
    <div id="1-news" class="news">Two</div> 
 
    <div id="2-news" class="news">Three</div> 
 
    <div id="3-news" class="news">Last one</div> 
 
    
 

 
<article id="selectedNews"> 
 
\t <h1>Titre</h1> 
 
\t <figure> \t 
 
\t \t <img src="" alt="titre"/> 
 
\t </figure> 
 
\t <div id="content"> 
 
\t \t bla bla 
 
\t </div> 
 
</article>

Answer 1

。 https://jsfiddle.net/qqyvu3dm/4/

EDITはであなたのデータから、ボタンを作成し

<div id="0-news" class="news" onclick="display(0)">One</div> 

そして、あなたのJSで

window.display = function(index) { 
    var data = newsListData[index]; // get the right data from the array 
    ... 
} 

DEMO：私はこのように、.news要素にイベントリスナーを取り付けることによって、それを行うだろうループ：

var newsList = document.getElementById("newsList"); 
    var button; 

    for (var i = 0; i < newsListData.length; i++) { 
    // create button element in memory 
    button = document.createElement("button"); 

    // set id attribute 
    button.setAttribute("id", index + "-news"); 

    // attach event listener, pass i as pointer to your array element 
    button.onclick = display(i); 

    // append the button into #newsList div 
    newsList.appendChild(button); 
    }