Форум

golden_yuna · #1 (**permalink**) 25.04.2016, 18:26

Доброго времени суток,

Не могу понять как при нажатии на div получить содержимое array. Понятно, что получить элемент associative array можно так:

exampleArray[i].key;

Но я не очень понимаю как это реализовать в коде.
Мой код тут [JSfiddle]

Спасибо заранее.

golden_yuna · #2 (**permalink**) 25.04.2016, 18:35

Переписала сюда код для надежности

<!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>

golden_yuna · #3 (**permalink**) 26.04.2016, 22:24

Получилось что-то вроде того,если кому-то было интересно https://jsfiddle.net/qqyvu3dm/4/

Думаю завернуть это в цикл.

aklis · #4 (**permalink**) 26.04.2016, 22:51

Честно говоря я даже глядя на результат так и не понял чего надо то сделать было

bes · #5 (**permalink**) 27.04.2016, 00:31

Сообщение от golden_yuna

Не могу понять как при нажатии на div получить содержимое array

<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>

aklis · #6 (**permalink**) 27.04.2016, 00:57

http://learn.javascript.ru/behavior
Так тоже вариант.

nerv_ · #7 (**permalink**) 27.04.2016, 01:22

golden_yuna, существует 2 способа "привязать" что-либо к элементу в разметке:
1. используюя аттрибуты html элемента
2. используя св-ва DOM объекта
подробнее здесь

Как ты могла заметить, атрибуты весьма удобны ввиду своей наглядности.
Однако, на практике так никто не делает, просто потому, что у тебя функция display() лежит в глобале (window). Конечно, можно и так залепить window.foo.display(), но все равно ты упрешся в то, что тебе нужен шаблонизатор для работы с разметкой.

Допустим, ты заюзаешь любой из множества шаблонизаторов и поймешь, что это действтительно удобно. После этого ты столкнешься с необходимостью биндить обработчики событий, не пробрасывая их в глобал + тебе потребуется условный рендеринг + динамическая привязка данных и т.д.

Т.о., если ты интересуешься в учебных целях, см. первый абзац.
Если тебе нужно "запилить" приложение/компонент, как правило, исопльзуют библиотеки/фреймворки. Пример с импользованием библиотеки vue.js https://jsfiddle.net/he4gw9nh/1/ Нетрудно заметить, что количество кода для реализации простой задачи? сокращается в разы (за счет декларативности и реактивности).

golden_yuna · #8 (**permalink**) 27.04.2016, 21:30

aklis, хах, я поняла, что криво объяснила. есть список из див элементов, каждый из них привязан к элементу array, нужно чтобы контент этого array отображался при клике на див, в элементе #example, к примеру.

я уже поняла как все сделать, спасибо всё равно за ответ

Форум

Справочник

Discord чат

Курсы javascript