单击每个标签时更改数组中的音频 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++) {&nbsp; &nbsp; a[i].on('click', function () {&nbsp; &nbsp; &nbsp; &nbsp; $('#music').attr('src', sources[i % sources.length]);&nbsp; &nbsp; &nbsp; &nbsp; $('#music').get(0).play();&nbsp; &nbsp; })};