Отображать элементы ассоциативного массива при нажатии

Question

У меня есть четыре элемента div, и у меня есть четыре элемента в моем массиве. Я хотел бы получить что-то вроде этого:

Когда пользователь делает щелчок на первом div элемента (class .news), «ценность» первого элемент массива отображается внутри div #selectedNews.

Here's my code

Моя проблема заключается в том, что я не понимаю, как связать Див и массив элементов.

код еще раз:

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

Вы должны знать индекс элемента массива, который требуется отобразить. Я хотел бы сделать это путем присоединения слушателя событий к .news элементов, например:

<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 https://jsfiddle.net/qqyvu3dm/4/

EDIT Создание кнопок из ваших данных петля:

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