Блог

Я хочу изменить аудио src при нажатии на каждый тег a, например, когда я нажимаю на первый тег a, должен воспроизводиться только первый src в массиве и так далее. Я написал этот код, но при нажатии на теги src будет меняться каждый раз (я хочу, чтобы первый src был только для первого тега a, а второй для второго …);

   $(function () {
        const sources = [
            '1',
            '2',
            '3',
            '4',
            '5',
            '6',
            '7',
            '8',
            '9',
            '10'
        ];

        for (var i = 0; i < $('a').length; i  ) {
            $('a').eq(i).on('click', function () {
                if (i <
                    sources.length ) {
                    i  ;
                } else {
                    i = 0;
                }
                $('#music').attr('src', sources[i]);
                $('#music').get(0).play();
            })

        };

    });
  

Если я вас правильно понял, вы можете использовать $.index() , чтобы получить источник для выбранного <a> элемента.

.index() / .index( selector ) / .index( object )

Описание: Поиск заданного элемента из числа совпадающих элементов.

Возвращаемые значения
Если методу не передается аргумент .index() , возвращаемое значение представляет собой целое число, указывающее положение первого элемента в объекте jQuery относительно его родственных элементов.

Если .index() вызывается для коллекции элементов и передается элемент DOM или объект jQuery, .index() возвращает целое число, указывающее положение переданного элемента относительно исходной коллекции.

Если строка селектора передается в качестве аргумента, .index() возвращает целое число, указывающее положение первого элемента в объекте jQuery относительно элементов, соответствующих селектору. Если элемент не найден, .index() вернет -1.

 $(function() {
  const sources = [ '1','2','3','4','5','6','7','8','9','10' ],
        anchors = $("a");

  anchors.on('click', function(ev) {
    ev.preventDefault();
  
    const indexOfClickedAnchor = anchors.index(this),
          source = sources[indexOfClickedAnchor];
  
    console.log(indexOfClickedAnchor, source);
  
    /* 
    $('#music').attr('src', source)
               .get(0)
               .play();
    */
  });
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a>
<a href="">6</a><a href="">7</a><a href="">8</a><a href="">9</a><a href="">10</a>  

i переменная поднята, поэтому вы должны объявить ее как let (если ES2015 возможен) или использовать для этого замыкание. Кроме того, вам, вероятно, не следует вносить изменения i внутри цикла, как вы это делали, чтобы вам не нужно было учитывать случай бесконечного цикла. Лучшим циклом было бы:

 const a = $('a');
for (let i = 0; i < a.length; i  ) {
    a[i].on('click', function () {
        $('#music').attr('src', sources[i % sources.length]);
        $('#music').get(0).play();
    })
};