Отображение элемента associative array при клике
Доброго времени суток,
Не могу понять как при нажатии на div получить содержимое array. Понятно, что получить элемент associative array можно так: exampleArray[i].key; Но я не очень понимаю как это реализовать в коде. Мой код тут [JSfiddle] Спасибо заранее. |
Переписала сюда код для надежности
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#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;
}
</style>
<script>
var newsListData = [
{
"group" : "science",
"title" : "Текст тут",
"image" : "images/news1.jpg",
"content" : "Много текста."
},
{
"group" : "science",
"title" : "Название",
"image" : "images/news2.jpg",
"content" : "Очень много текста"
},
{
"group" : "science",
"title" : 'Название',
"image" : "images/news3.jpg",
"content" : "Много текста"
},
{
"group" : "economics",
"title" : 'Еще название',
"image" : "images/news4.jpg",
"content" : "Очень много текста"
}]
var selected;
function showMore() {
// пустой элемент selected
selected.innerHTML = "";
// потомок элемента, на которого наведена мышь
for (var i = 0; i < this.children.length; i++) {
// клонирую элементы и отправляю в selected
selected.appendChild(this.children[i].cloneNode(true));
}
}
// элементы к показу
document.addEventListener("DOMContentLoaded", function() {
// Выбор элементов
var selectedNews = newsListData;
for (var i = 0; i < selectedNews.length; i++) {
// Добавляю listeners
selectedNews[i].addEventListener("click", showMore);
}
selected = document.getElementById("selectedNews")
});
</script>
</head>
<body>
<div id="newsList">
<input type="text" placeholder="filter..." id="filter"/>
<div class="list">
<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">
<h1>Titre</h1>
<figure>
<img src="" alt="titre"/>
</figure>
<div id="content">
bla bla
</div>
</article>
</body>
</html>
|
Получилось что-то вроде того,если кому-то было интересно https://jsfiddle.net/qqyvu3dm/4/
Думаю завернуть это в цикл. |
Честно говоря я даже глядя на результат так и не понял чего надо то сделать было :)
|
Цитата:
<meta charset="utf-8">
<style>
.news {
cursor: pointer;
border: solid 1px;
}
</style>
<div class="list">
<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>
</div>
<script>
(function () {
var newsListData = [
{
"group" : "science",
"title" : "Текст тут",
"image" : "images/news1.jpg",
"content" : "1 Много текста."
},
{
"group" : "science",
"title" : "Название",
"image" : "images/news2.jpg",
"content" : "2 Очень много текста"
},
{
"group" : "science",
"title" : 'Название',
"image" : "images/news3.jpg",
"content" : "3 Много текста"
},
{
"group" : "economics",
"title" : 'Еще название',
"image" : "images/news4.jpg",
"content" : "4 Очень много текста"
}];
document.querySelector(".list").addEventListener("click", function (e) {
if (e.target.className == "news") {
e.target.innerHTML = newsListData[ Array.prototype.indexOf.call( this.querySelectorAll(".news"), (e.target) )].content;
}
});
})();
</script>
|
http://learn.javascript.ru/behavior
Так тоже вариант. |
golden_yuna, существует 2 способа "привязать" что-либо к элементу в разметке:
1. используюя аттрибуты html элемента 2. используя св-ва DOM объекта подробнее здесь Как ты могла заметить, атрибуты весьма удобны ввиду своей наглядности. Однако, на практике так никто не делает, просто потому, что у тебя функция display() лежит в глобале (window). Конечно, можно и так залепить window.foo.display(), но все равно ты упрешся в то, что тебе нужен шаблонизатор для работы с разметкой. Допустим, ты заюзаешь любой из множества шаблонизаторов и поймешь, что это действтительно удобно. После этого ты столкнешься с необходимостью биндить обработчики событий, не пробрасывая их в глобал + тебе потребуется условный рендеринг + динамическая привязка данных и т.д. Т.о., если ты интересуешься в учебных целях, см. первый абзац. Если тебе нужно "запилить" приложение/компонент, как правило, исопльзуют библиотеки/фреймворки. Пример с импользованием библиотеки vue.js https://jsfiddle.net/he4gw9nh/1/ Нетрудно заметить, что количество кода для реализации простой задачи? сокращается в разы (за счет декларативности и реактивности). |
aklis, хах, я поняла, что криво объяснила. есть список из див элементов, каждый из них привязан к элементу array, нужно чтобы контент этого array отображался при клике на див, в элементе #example, к примеру.
я уже поняла как все сделать, спасибо всё равно за ответ |
| Часовой пояс GMT +3, время: 11:21. |