Ich habe vier div
Elemente und ich habe vier Elemente in meinem Array. Ich möchte so etwas bekommen:Anzeigeelemente des assoziativen Arrays auf Klick
Wenn Benutzer einen Klick auf das erste Element div
macht (class .news
), „Werte“ des ersten Elements des Arrays innerhalb von div #selectedNews
angezeigt.
Mein Problem ist, dass ich nicht verstehe, wie Elemente div und Array zugeordnet werden soll.
-Code wieder:
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>
Vielen Dank! Ist es in meinem Fall möglich, eine Schleife zu machen, oder ist es nutzlos? – Martin
Ja, eine Schleife, um die Tasten zu generieren, wäre ein besserer Ansatz – Ozrix
Ich habe die Antwort aktualisiert, um Ihre Schleife unterzubringen – Ozrix