Question

我正在创建一个页面，我希望为播放器提供多个播放列表。

这是脚本，你可能以前见过它：

var audio;
var playlist;
var tracks;
var current;
init();
function init(){
    current = 0;
    audio = $('.player');
    playlist = $('.album_tracks_container');
    tracks = playlist.find('li a');
    len = tracks.length;
    playlist.find('a').click(function(e){
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, audio[0]);
        $('.audioplayer').removeClass('audioplayer-stopped');
        $('.audioplayer').addClass('audioplayer-playing');
    });
    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
            link = playlist.find('a')[0];
        }else{
            link = playlist.find('a')[current];   
        }
        run($(link),audio[0]);
        $('.audioplayer').removeClass('audioplayer-stopped');
        $('.audioplayer').addClass('audioplayer-playing');
    });
}
function run(link, player){
    $('.album_tracks_container').find('.album_tracks_light, .album_tracks_dark').removeClass('album_tracks_active');
    player.src = link.attr('href');
    par = link.parent();
    par.addClass('album_tracks_active').siblings().removeClass('album_tracks_active');
    $('.album_tracks_container').find('.album_tracks_light, .album_tracks_dark').find('.album_tracks_number, .album_tracks_text').removeClass('album_tracks_number-text_active');
    par.find('.album_tracks_number, .album_tracks_text').addClass('album_tracks_number-text_active');
    audio[0].load();
    audio[0].play();
}

现在我想将播放列表var更改为类似的东西（是的，我不知道javaScript，但我希望你能得到我想做的事）

$('a').click(function(){
    playlist = $(this).closest('.album_tracks_container');
});

将附加到该类的最近div添加到我点击的链接。

我需要这样做的原因是因为我在页面中有多个'.album_tracks_container'，并且没有代码更改，它只会选择最上面的一个作为播放列表（当我在下面播放一首歌时，下一个歌曲将继续在顶部播放列表中播放）

所以，是的，我希望播放列表var =最接近.album_tracks_container到'a'（链接）我点击。

我希望我有道理。

这是html

<body>
    <div class="player_container">
        <audio class="player" preload="auto" controls>
            <source src="media/playlist1/01.wav"/>
        </audio>
    </div>
    <div class="content_container">
        <div id="A">
            <div class="album_container">
                <div class="album_art playlist1"></div>
                <div class="album_artist_title">
                    <span class="album_artist_title_text">playlist1</span>
                </div>
                <div class="album_album_title">
                    <span class="album_album_title_text">3 songs</span>
                </div>
                <ul class="album_tracks_container">
                    <li class="album_tracks_light">
                        <span class="album_tracks_number">01</span> <span class="album_tracks_text">song 1</span>
                        <a href="media/playlist1/01.wav"></a>
                    </li>
                    <li class="album_tracks_dark">
                        <span class="album_tracks_number">02</span> <span class="album_tracks_text">song 2</span>
                        <a href="media/playlist1/02.wav"></a>
                    </li>
                    <li class="album_tracks_light">
                        <span class="album_tracks_number">03</span> <span class="album_tracks_text">song 3</span>
                        <a href="media/playlist1/03.wav"></a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="C">
            <div class="album_container">
                <div class="album_art playlist2"></div>
                <div class="album_artist_title">
                    <span class="album_artist_title_text">playlist2</span>
                </div>
                <div class="album_album_title">
                    <span class="album_album_title_text">3 songs</span>
                </div>
                <ul class="album_tracks_container">
                    <li class="album_tracks_light">
                        <span class="album_tracks_number">01</span> <span class="album_tracks_text">song 1</span>
                        <a href="media/playlist2/01.wav"></a>
                    </li>
                    <li class="album_tracks_dark">
                        <span class="album_tracks_number">02</span> <span class="album_tracks_text">song 2</span>
                        <a href="media/playlist2/02.wav"></a>
                    </li>
                    <li class="album_tracks_light">
                        <span class="album_tracks_number">03</span> <span class="album_tracks_text">song 3</span>
                        <a href="media/playlist2/03.wav"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

Answer 1

由于已经注册了点击事件，我不确定您是否理解您要对此$('a').click()做什么。无论如何，让我试一试。您如何看待以下代码？

var currentPlaylist;
playlist.find('a').click(function(e){
    e.preventDefault();
    link = $(this);
    current = link.parent().index();
    currentPlaylist = link.closest('.album_tracks_container'); // <<<
    run(link, audio[0]);
    $('.audioplayer').removeClass('audioplayer-stopped');
    $('.audioplayer').addClass('audioplayer-playing');
});

如何选择链接父级的父级？

1 个答案: