Получение [i] массива при клике и его родительский элемент в массиве

@Limongrass · Регистрация: 07.11.2017

Author24 — интернет-сервис помощи студентам

Есть такой код:

Javascript

for (i = 0; i <data.length; i++){
        let names = data[i].name;
 
        let img = document.createElement('img');
        let imgsrc = data[i].avatar;
        img.className = "contacts_list_avatar";
 
        $('.contacts_list_avatar').css('width', '10px').css('height', '10px');
 
        var list = document.getElementById('list');
        var contacts = document.createElement('div');
        var contactsDiv = document.getElementsByClassName('list_item');
        contacts.id = data[i].name;
        contacts.className = "list_item";
        contacts.innerHTML = "<img src=" + imgsrc + ">" + '<p>' + names + '</p>';
        list.appendChild(contacts);
 
        $('.list_item').css('border-bottom', '1px solid #75BFFF')
                        .css('height', '10%')
                        .css('color', '#75BFFF');                
 
        contactsDiv[i].onclick = function detailed(event){  //Если кликаем на див, нужно получить data[i].name элемента, который                                  //мы вставляем в contacts.innerHTML = "<img src=" + imgsrc + ">" + '<p>' + names + '</p>';
            var target = event.target;
            $('#contact_screen').css('display', 'none');
            $('#detailed').css('display', 'block');
            
            if (target.tagName === "DIV"){   //Тут пытаемся получить data[i].name 
                let targetName = target.textContent;    
                // console.log(target.key);
                // let names = data[i].name;
            };
            
        }                
    };

У нас есть проскроливаемый список контактов. При клике на определенный див должен открываться новый экран в зависимости от того, на див с каким data[i].name мы кликнули. Получить строку с этим именем не проблема, но нужен именно элемент массива, по которому можно будет добраться до родителя или до соседа. И как можно добраться до этого самого родителя или соседа? И как получить номер [i] из data[i].name (в теории через него можно будет передвигаться по массиву)?

@amr-now · 02.12.2018, 19:43

PHP/HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        .list_item {
            border-bottom: 1px solid #75BFFF;
            height: 10%;
            color: #75BFFF;
        }
 
        .contacts_list_avatar {
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div id="list"></div>
    <script>
        let data = [
            { name: "Kira Nitely1", avatar: "http://cyberstatic.net/images/cyberforum_logo.png" },
            { name: "Kira Nitely2", avatar: "http://cyberstatic.net/images/cyberforum_logo.png" },
        ];
        let list = document.getElementById('list'),
            s = "";
 
        for (let item of data) {
            s += `<div class="list_item"><img class="contacts_list_avatar" src="${item.avatar}" /><p>${item.name}</p></div>`;
        }
        list.innerHTML = s;
        list.onclick = detailed;
 
        function detailed(event) {  //Если кликаем на див, нужно получить data[i].name элемента, который                                  
            //мы вставляем в contacts.innerHTML = "<img src=" + imgsrc + ">" + '<p>' + names + '</p>';
 
            for (let el = event.target; el != this; el = el.parentElement) {
                if (el.className === "list_item") {
                    alert(data.findIndex(e => e.name === el.children[1].textContent));
                    break;
                }
            }
        }
    </script>
</body>
</html>

@kalabuni · 02.12.2018, 21:41

Не по теме:

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

При клике на определенный див должен открываться новый экран

очень жаль, что не стоит задача появления на столе нового монитора при клике на определённый див -- я бы с удовольствием посмотрел на такое решение, бросил бы работать, сидел бы себе и кликал :)

@Limongrass · 03.12.2018, 08:49 **[ТС]**

kalabuni, новый экран в том смысле, что открывается карточка этого контакта, с сайтом, адресом и т.д.)

amr-now,

Javascript

let data = [
            { name: "Kira Nitely1", avatar: "http://cyberstatic.net/images/cyberforum_logo.png" },
            { name: "Kira Nitely2", avatar: "http://cyberstatic.net/images/cyberforum_logo.png" },
        ];

Так можно сделать, если контактов немного, но у меня их почти сотня. И массив этот с контактами очень большой, там не только имя и аватар, там адрес, сайт и еще много чего. И массив в массиве в массиве в массиве, вот!

@renat_dmitriev · 03.12.2018, 09:27

Во-первых:
Это

Javascript

1	$('.contacts_list_avatar').css('width', '10px').css('height', '10px');

и это

Javascript

1
2
3

$('.list_item').css('border-bottom', '1px solid #75BFFF')
                        .css('height', '10%')
                        .css('color', '#75BFFF');

вынести за пределы цикла, зачем это выполнять при каждой итерации?

Во-вторых:

вместо

Javascript

1 2	var contactsDiv = document.getElementsByClassName('list_item'); contactsDiv[i].onclick = function detailed(event){ ... }

напишите

Javascript

1	contacts.onclick = function detailed(event){ ... }

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

Получить строку с этим именем не проблема, но нужен именно элемент массива, по которому можно будет добраться до родителя или до соседа.

Javascript

1	contacts.dataset.index = i

Затем при клике обращаетесь к data[event.target.dataset.index]

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

И как можно добраться до этого самого родителя или соседа?

Сосед видимо ваш индекс плюс минус 1. А что понимается под родителем - непонятно, в вашем коде обход плоской таблицы

@Limongrass · 03.12.2018, 10:23 **[ТС]**

Так, смогла получить массив, в котором непосредственно находятся данные контакта, но contacts.dataset.index = i не работает как ожидалось - выдает каждый раз одну и ту же цифру, на какой контакт ни нажала бы.

@renat_dmitriev · 03.12.2018, 12:25

Limongrass,

Добавьте ключевое слово let, тогда область видения итератора будет в пределах итерации

Javascript

1	for (let i = 0; i < data.length; i++){

@amr-now · 03.12.2018, 16:20

renat_dmitriev, contacts - это <div>
Откуда у HTML-элемента свойство dataset ?

Добавлено через 1 минуту
Понятно, костыльно привязываем индекс из исходного массива.

@renat_dmitriev · 03.12.2018, 16:36

Сообщение от amr-now

Откуда у HTML-элемента свойство dataset ?

Из спецификации наверное
https://developer.mozilla.org/... nt/dataset

Сообщение от amr-now

костыльно привязываем индекс из исходного массива.

А как по вашему не костыльно?

@kalabuni
	02.12.2018, 21:41 #3
	Не по теме: Сообщение от Limongrass При клике на определенный див должен открываться новый экран очень жаль, что не стоит задача появления на столе нового монитора при клике на определённый див -- я бы с удовольствием посмотрел на такое решение, бросил бы работать, сидел бы себе и кликал :) 0

@Limongrass 0 / 0 / 0 Регистрация: 07.11.2017 Сообщений: 121
	03.12.2018, 10:23 [ТС]	6
	Так, смогла получить массив, в котором непосредственно находятся данные контакта, но contacts.dataset.index = i не работает как ожидалось - выдает каждый раз одну и ту же цифру, на какой контакт ни нажала бы. 0

@amr-now 6492 / 3903 / 2005 Регистрация: 14.06.2018 Сообщений: 6,781
	03.12.2018, 16:20	8
	renat_dmitriev, contacts - это <div> Откуда у HTML-элемента свойство dataset ? Добавлено через 1 минуту Понятно, костыльно привязываем индекс из исходного массива. 0

@renat_dmitriev 392 / 294 / 121 Регистрация: 26.08.2016 Сообщений: 902
	03.12.2018, 16:36	9
	Сообщение от amr-now Откуда у HTML-элемента свойство dataset ? Из спецификации наверное https://developer.mozilla.org/... nt/dataset Сообщение от amr-now костыльно привязываем индекс из исходного массива. А как по вашему не костыльно? 0

Получение [i] массива при клике и его родительский элемент в массиве

Решение