Как каждую кнопку сделать уникальной?

Question

[Вадим Левкович]

У менять есть три кнопки, каждая с одинаковым классом - btn__play.
Также имеется скрипт в JS, который запускает трек по нажатию, но мне обязательно нужно чтобы класс был одним и тем же.
Думал как-то занести в массив класс, и оттуда брать...

Суть в том что я ничего не понял((, и прошу помощи :>>

Comments

[Павел]

дак мы тоже нечего не поняли , прочти что ты написал и поставь себя на наше место

[Вадим Левкович]

Павел, хмхмхмхмммм...

Ну смотри, есть 3 кнопки в HTML с классом btn__play.
И также есть JS Скрипт который включает музыку...
Но это работает только с одной кнопкой, так как класс у кнопок один и тот же...
Нада что-то делать, класс ни в коем случае менять ненада!

[Павел]

Вадим Левкович, ну так может стоит скрипт показать?)

[Kvason]

чем тебе айди или второй класс не подходит?

[Вадим Левкович]

Павел, на

var btn = document.querySelector('.btn__play');
var aud = document.querySelector('.aud');

function playPause() {
    btn.addEventListener('click', () => {
        if($('.btn__play').text() === 'Pause') {
            $('.btn__play').text('Play');
            aud.pause();
        } else {
            $('.btn__play').text('Pause');
            aud.play();
        }
    });
}

playPause();

[Вадим Левкович]

Kvason, Там стоит обработчик PHP. НУ МНЕ НАДА с одним КЛАССОМ.
Ну ПОМОГИТе вы уже...

[Павел]

Вадим Левкович, document.querySelector('.btn__play'); выбирает первую кнопку на странице, нужно использовать document.querySelectorAll('.btn__play'); , тогда это будет массив, а дальше циклом..

[Вадим Левкович]

Павел, У меня почему-то не работает "All". Может проблема с возвращением значения...

[Василий Банников]

Вадим Левкович, дай проясню.
У тебя есть три кнопки в html, у который класс btn__play
И есть скрипт, который позволяет при нажатии на одну из этих кнопок играть музыку.
Сейчас скрипт позволяет делать это только с одной кнопкой.
Ты хочешь делать это со всеми кнопками, но не меняя класс.

Я правильно понял?

[Вадим Левкович]

Василий Банников, Да, Всё верно. Я понял что нужно делать с querySelectorAll, но не знаю как его перебрать...

[Василий Банников]

Вадим Левкович, циклом его перебрать :) и вместо $() использовать this или параметр, который передаётся в функцию.

const buttons = document.querySelectorAll(".btn__play");
for(const button of buttons) {
  button.addEventListener("click", ({currentTarget})=> {
        if(currentTarget.textContent === 'Pause') {
            this.textContent = 'Play';
            aud.pause();
        } else {
            currentTarget.textContent = 'Pause';
            aud.play();
        }
  });
}

[Kvason]

Вадим Левкович, цикл forEach

[Kvason]

document.querySelectorAll('.btn__play').forEach(item => {
     item.addEventListener('click', function(){
       //твой код
     });
  })

[Вадим Левкович]

Василий Банников, Хорошо я понял, спасибо. Ещё вопрос... Как пройтись сразу по двум классам?
Потому как, несколько ресурсов на треки, и сами кнопки...

[Василий Банников]

Вадим Левкович, сформулируй задачу чуть лучше :)

[Сергей Сергей]

document.querySelectorAll('.btn__play, .select__play, .radio__play')

[Вадим Левкович]

Сергей Сергей, Спасибо, ещё вопрос, вот у меня код

document.querySelectorAll('.btn__play, .aud').forEach(item => {
    item.addEventListener('click', function(){
      sd.play();
    });
 })

Как передать два параметра? Через запятую не работает...
только один передаётся (item).

[Вадим Левкович]

Вадим Левкович, Пробовал передавать вот так (item, sd). Но, не работает(

[Сергей Сергей]

все найденные элементы будут отправлены аргументом item из общего одномерного списка по порядку нахождения.

[Вадим Левкович]

Сергей Сергей, Ага, понял. То есть, можно же как-то обратится к каждому из них? Например может вот так:
item.classlist('btn__play'); Ну не знаю... Это только моё предположение, нужно пробовать!

[Вадим Левкович]

Сергей Сергей, Попробовал что-то придумать:
document.querySelectorAll('.btn__play, .aud').forEach(item => {
if(item.classList('btn__play')) {
this.addEventListener('click', () => {

});
}
});

В итоге получил ошибку..

Answer 1

[Okujava-script]

<style>
.btn__play{
	width: 70px;
	cursor: pointer;
	border-radius: 10px;
}
</style>
track1: <button class=btn__play> Play </button><br /><br />
track2: <button class=btn__play> Play </button><br /><br />
track3: <button class=btn__play> Play </button>
<audio class=aud src='https://mysynthesizer.github.io/index.hetemeel/track1.mp3'></audio>
<audio class=aud src='https://mysynthesizer.github.io/index.hetemeel/track2.mp3'></audio>
<audio class=aud src='https://mysynthesizer.github.io/index.hetemeel/track3.mp3'></audio>
<script>
var btn = document.querySelectorAll('.btn__play');
var aud = document.querySelectorAll('.aud');

function playPause(index) {
    btn[index].addEventListener('click', () => {
        if(btn[index].textContent === 'Pause') {
            btn[index].textContent = 'Play';
            aud[index].pause();
        } else {
            btn[index].textContent = 'Pause';
            aud[index].play();
        }
    });
}

for(i = 0; i < btn.length; i ++){
	playPause(i);
	aud[i].onended =_=> btn[i].textContent = 'Play';
}
</script>

Правда, не знаю, как это сделать на jquery.