单击每个标签时更改数组中的音频 src (Jquery)

Question

我想在单击每个 a 标签时更改音频 src，例如，当我单击第一个 a 标签时，应该只播放数组中的第一个 src 等等。我写了这段代码，但是通过点击一个标签，src 每次都会改变（我想要第一个 src 只用于第一个标签，第二个用于第二个...）；  $(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();            })        };    });

Answer 1

如果我没看错，那么您可以使用$.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>

Answer 2

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

    })

};