Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 Аватар для cupoma
0 / 0 / 0
Регистрация: 13.09.2016
Сообщений: 76

Идентификация элемента массива

23.04.2025, 10:33. Показов 1488. Ответов 19
Метки html, js (Все метки)

Студворк — интернет-сервис помощи студентам
Привет.
JavaScript
1
2
3
4
5
6
// выбор трека, через элемент плей-листа: 
document.querySelectorAll('.playlist li').forEach ((el, i) => {  
    el.addEventListener('click', () => {
        choosTrak(i);
    });  
});
Есть-ли возможность- определить id выбранного трека? Я - не нашёл.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
23.04.2025, 10:33
Ответы с готовыми решениями:

Идентификация ПК юзера
Приветствую. Подскажите, можно ли как то идентифицировать ПК юзера, для того, что бы запретить ему...

Идентификация картинок
Есть серии по 200-500 картинок (img1.jpg; img2.jpg; ...) На каждой по несколько сфотографированных...

WebSocket и идентификация
Всем привет, есть чат, каждый пользователь регистрируется и данные заносятся в sql. webSocket...

19
Эксперт JSЭксперт HTML/CSS
 Аватар для krvsa
3796 / 1622 / 428
Регистрация: 14.03.2022
Сообщений: 4,032
23.04.2025, 11:01
Цитата Сообщение от cupoma Посмотреть сообщение
Есть-ли возможность- определить id выбранного трека?
Где в html хранится тот самый id?
0
 Аватар для cupoma
0 / 0 / 0
Регистрация: 13.09.2016
Сообщений: 76
23.04.2025, 12:07  [ТС]
Цитата Сообщение от krvsa Посмотреть сообщение
Где в html хранится тот самый id?
Нигде, только в массиве, в js-файле:
JavaScript
1
2
3
4
var playlist = [
    file-1.mp3
    ...
]
В htm:
HTML5
1
2
3
<ul class="playlist>
    <li>имя трека-1</li>
    ...
Намекаешь, что надо пометить <li class="">?
0
Эксперт JSЭксперт HTML/CSS
 Аватар для krvsa
3796 / 1622 / 428
Регистрация: 14.03.2022
Сообщений: 4,032
23.04.2025, 12:15
Цитата Сообщение от cupoma Посмотреть сообщение
только в массиве, в js-файле
Доступен ли тот массив для функции обработчика?
Совпадает ли порядок следования и количество элементов .playlist li с тем массивом?
0
 Аватар для cupoma
0 / 0 / 0
Регистрация: 13.09.2016
Сообщений: 76
23.04.2025, 12:32  [ТС]
Доступен и совпадает. Запускается именно тот трек, по которому кликнули. У меня работает подсветка строки выбранного трека, если - подряд или - через кнопку. При выборе, из плей-листа, подсветка срабатывает на первом, из списка, треке. И переход идёт - на второй трек, а не на следующий, после выбранного. Компилятор не понимает - какую строку, ему, подсвечивать и куда переходить.
0
 Аватар для voraa
1220 / 1105 / 173
Регистрация: 21.01.2024
Сообщений: 5,039
23.04.2025, 13:29
Цитата Сообщение от cupoma Посмотреть сообщение
Компилятор не понимает - какую строку, ему, подсвечивать и куда переходить.
Мы тоже не понимаем почему так, без кода.
0
Эксперт JSЭксперт HTML/CSS
 Аватар для krvsa
3796 / 1622 / 428
Регистрация: 14.03.2022
Сообщений: 4,032
23.04.2025, 16:05
Цитата Сообщение от cupoma Посмотреть сообщение
Доступен и совпадает.
Тогда, как вариант...

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ul class="playlist">
    <li>имя трека-1</li>
    <li>имя трека-2</li>
    <li>имя трека-3</li>
    <li>имя трека-4</li>
</ul>
 
<script>
const pl = [
    'file-1.mp3',
    'file-2.mp3',
    'file-3.mp3',
    'file-4.mp3',
]
const op = document.querySelector('.playlist')
op.addEventListener('click', e => {
    const o = e.target.closest('li')
    if (!o) return
    const i = Array.from(op.querySelectorAll('li')).indexOf(o)
    if (~i) alert(pl[i])
})
</script>
0
 Аватар для cupoma
0 / 0 / 0
Регистрация: 13.09.2016
Сообщений: 76
23.04.2025, 19:40  [ТС]
Цитата Сообщение от krvsa Посмотреть сообщение
const i = Array.from(op.querySelectorAll('li')).in dexOf(o)
Я, так, понимаю - эта "const i =..." - из формулы выбора "forEach ((el, i) => {..." ?
А откуда, если не секрет - indexOf() ? Я, по массивам, хорошо пошарился.
0
Эксперт JSЭксперт HTML/CSS
 Аватар для krvsa
3796 / 1622 / 428
Регистрация: 14.03.2022
Сообщений: 4,032
23.04.2025, 20:49
Цитата Сообщение от cupoma Посмотреть сообщение
А откуда, если не секрет - indexOf() ? Я, по массивам, хорошо пошарился.
Видать не с того конца начал шарить...
Этому методу сто лет в обед...
https://doka.guide/js/index-of/

Добавлено через 1 минуту
Цитата Сообщение от cupoma Посмотреть сообщение
Я, так, понимаю - эта "const i =..." - из формулы выбора "forEach ((el, i) => {..." ?
А вот этот вопрос я не понял...
0
 Аватар для voraa
1220 / 1105 / 173
Регистрация: 21.01.2024
Сообщений: 5,039
23.04.2025, 20:59
Цитата Сообщение от krvsa Посмотреть сообщение
Array.from(op.querySelectorAll('li')).in dexOf(o)
Это просто слишком длинная запись
Так короче и понятнее
JavaScript
1
const i = [...op.querySelectorAll('li')].indexOf(o)
0
Эксперт JSЭксперт HTML/CSS
 Аватар для krvsa
3796 / 1622 / 428
Регистрация: 14.03.2022
Сообщений: 4,032
23.04.2025, 21:54
voraa, благо JS дает достаточно вариантов для реализации задач...
0
 Аватар для voraa
1220 / 1105 / 173
Регистрация: 21.01.2024
Сообщений: 5,039
23.04.2025, 22:09
Цитата Сообщение от krvsa Посмотреть сообщение
благо JS дает достаточно вариантов
Что бы можно было по полчаса обдумывать, какой из этих равноценных вариантов использовать, тщательно взвешивая все за и против.
0
 Аватар для cupoma
0 / 0 / 0
Регистрация: 13.09.2016
Сообщений: 76
23.04.2025, 23:15  [ТС]
Цитата Сообщение от krvsa Посмотреть сообщение
Тогда, как вариант...
Да, этот вариант - то-же рабочий, но...я, похоже, неправильно сформулировал вопрос, изначально.
Что-бы понять, что делать с click-нутым элементом массива (кроме - запуска трека, с этим, он, справляется) - компилятору необходимо знать его индекс. А с этим - напряг:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var trak = 0;
...
// выбор файла, через элемент плей-листа: 
document.querySelectorAll('.playlist li').forEach ((el, i) => {  
    el.addEventListener('click', () => { 
        choosTrak(i);        
    });  
});
// подготовка файла:
function choosTrak(numTrak) {  
    ap.src = 'f:/path/to/' + playlist[numTrak];
    onLith();               // подсветка строки
    audioPlay(); 
}
Подсветка включается для первого элемента плей-листа (var trak = 0, а не для выбранного.
Цитата Сообщение от krvsa Посмотреть сообщение
А вот этот вопрос я не понял...
Я, по незнанию, решил, что "const i = ..." - это определение индекса выбранного трека. Извиняюсь.
0
 Аватар для voraa
1220 / 1105 / 173
Регистрация: 21.01.2024
Сообщений: 5,039
23.04.2025, 23:27
Цитата Сообщение от cupoma Посмотреть сообщение
Подсветка включается для первого элемента плей-листа (var trak = 0, а не для выбранного.
Магические кристаллы я сдал в полировку.
А без них я не знаю, что такое onLith и как она устроена, что делает.
По огрызкам вашего кода понять ничего невозможно.
Почему в эту самую onLith запрещено передать параметр, какой трек подсвечивать, если надо подсвечивать не первый, а произвольный?
0
 Аватар для cupoma
0 / 0 / 0
Регистрация: 13.09.2016
Сообщений: 76
24.04.2025, 10:31  [ТС]
Цитата Сообщение от voraa Посмотреть сообщение
Почему в эту самую onLith запрещено передать параметр
Удивите, меня:
JavaScript
1
2
3
4
5
6
7
8
// включить подсветку
function onLith() {
    document.querySelectorAll('ul li')[trak].classList.add('active');
}
// отключить подсветку
function offLith() {
    document.querySelectorAll('ul li')[trak].classList.remove('active');
}
0
 Аватар для voraa
1220 / 1105 / 173
Регистрация: 21.01.2024
Сообщений: 5,039
24.04.2025, 11:34
Цитата Сообщение от cupoma Посмотреть сообщение
Удивите, меня:
JavaScript
1
2
3
4
5
6
7
8
// включить подсветку
function onLith(ntrak) {
    document.querySelectorAll('ul li')[ntrak].classList.add('active');
}
// отключить подсветку
function offLith(ntrak) {
    document.querySelectorAll('ul li')[ntrak].classList.remove('active');
}
Даже так можно, зачем две функции, когда достаточно одной с параметрами

JavaScript
1
2
3
function lightTrack(ntrack, onoff) {
    document.querySelectorAll('ul li')[ntrack].classList.toggle('active', onoff);
}
И зачем каждый раз делать document.querySelectorAll('ul li')?
Они, что динамически изменяются?
Если нет, то можно один раз найти и хранить в переменной.
0
 Аватар для cupoma
0 / 0 / 0
Регистрация: 13.09.2016
Сообщений: 76
25.04.2025, 12:08  [ТС]
Цитата Сообщение от voraa Посмотреть сообщение
Даже так можно
Ну, выглядит симпатично. Вот, разницы, между "trak" и "ntrak" - я не улавливаю.
0
 Аватар для voraa
1220 / 1105 / 173
Регистрация: 21.01.2024
Сообщений: 5,039
25.04.2025, 13:05
Цитата Сообщение от cupoma Посмотреть сообщение
Вот, разницы, между "trak" и "ntrak" - я не улавливаю.
Ну да. Что бы понять разницу между параметром и использованием глобальной переменной надо же js немного изучить.
0
 Аватар для cupoma
0 / 0 / 0
Регистрация: 13.09.2016
Сообщений: 76
26.04.2025, 21:35  [ТС]
Каждый раз, примерно - после второго посещения, я думаю - чего, я, сюда припёрся? Проходит месяц-два - забываю и - опять прусь. Зашёл на javascript.ru - пять минут - вопрос решён.
0
 Аватар для voraa
1220 / 1105 / 173
Регистрация: 21.01.2024
Сообщений: 5,039
26.04.2025, 22:17
Цитата Сообщение от cupoma Посмотреть сообщение
Зашёл на javascript.ru - пять минут - вопрос решён.
Разница в том, что там вы показали почти весь код.
А совет был тот же - использовать параметр.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
26.04.2025, 22:17
Помогаю со студенческими работами здесь

Идентификация нескольких элементов, идущих подряд
Всем привет! Помогите пожалуйсто написать простенький скрипт. Вот что он должен делать: есть...

Идентификация выключенного флеша
Всем привет! Можно ли через js выяснить, включен флеш в браузере или нет? Например мне надо...

Идентификация Checkbox
Доброго времени суток. Я начинаю изучать JS и у меня возникла проблема с идентификацией checkbox'a....

Идентификация планшета
Привет форумчане! Есть несколько планшетов. Требуется идентификация устройств на сайте. Каждый...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Новые блоги и статьи
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
Фото: Daniel Greenwood
kumehtar 13.11.2025
Расскажи мне о Мире, бродяга
kumehtar 12.11.2025
— Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru