change audio src in an array when click on each a tag (Jquery)

Question

I want to change audio src when I click on each a tags, for example when I click on the first a tag, just the first src in the array should play and so on. I wrote this code but by clicking on a tags the src will change every time (I want the first src just for the first a tag and second for second...);

  $(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();
            })

        };

    });

user_14288559 · Answer

the i variable is hoisted so you should declare it as let (if ES2015 is possible) or use a closure for that. Also, you probably shouldn't modify i inside the loop as you did so that you wouldn't need to account for an infinite loop case. A better loop would be:

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();
    })
};

user_402037 · Answer

If I got you right then you can use $.index() to get the source to the clicked element.

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

Description: Search for a given element from among the matched elements.

Return Values
If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

If .index() is called on a collection of elements and a DOM element or jQuery object is passed in, .index() returns an integer indicating the position of the passed element relative to the original collection.

If a selector string is passed as an argument, .index() returns an integer indicating the position of the first element within the jQuery object relative to the elements matched by the selector. If the element is not found, .index() will return -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();
    */
  });
});


12345
678910

change audio src in an array when click on each a tag (Jquery)

2 Answers