Question

我设置了音乐页面，当点击播放按钮播放歌曲时，课程从buttons_mp3j更改为buttons_mp3jpause。当课程为buttons_mp3jpause时，我想定位其父li.song并为其添加课程。

<li class="song">
    <div>
        <span>
            <span class="buttons_mp3jpause">
            </span>
        </span>
    </div>
</li>

我尝试了以下代码，但没有用。

$(".buttons_mp3jpause").parents("li.song").addClass("playing");

我哪里出错了？

修改

$('.haiku-play').bind('click', function() {
    $('.haiku-player').jPlayer("pause");
})

编辑2

<article>
    <ul>
        <li class="song">yadayada</li>
        <li class="song">yadayada</li>
        <li class="song">yadayada</li>
        <li class="song">yadayada</li>
    </ul>
</article>
<article>
    <ul>
        <li class="song">yadayada</li>
        <li class="song">yadayada</li>
        <li class="song">yadayada</li>
        <li class="song">yadayada</li>
    </ul>
</article>
<article>
    <ul>
        <li class="song">yadayada</li>
        <li class="song">yadayada</li>
        <li class="song">yadayada</li>
        <li class="song">yadayada</li>
    </ul>
</article>

Answer 1

正如您在问题中提到的，您正在动态分配类buttons_mp3jpause，因此您需要将处理程序附加到页面加载时存在于DOM中的元素，并将其委托给动态类，使用jQuery的.on()：

$('.song').on('click', '.buttons_mp3jpause', function() {
    $(this).closest('li.song').addClass('playing');
});

回应第一条评论：

只需从所有其他playing元素中移除song类（以下假设您的所有song元素均为siblings！）：

.addClass('playing').siblings('li.song').removeClass('playing');

回复您的上次评论：

在这种情况下最简单的方法是从所有playing元素中删除song类，然后将其添加到相关元素中：

$('li.song').removeClass('playing');
$(this).closest('li.song').addClass('playing');

完整示例：

$('.song').on('click', '.buttons_mp3jpause', function() {
    $('li.song').removeClass('playing');
    $(this).closest('li.song').addClass('playing');
});

Answer 2

$(".buttons_mp3jpause").parent().parent().parent().addClass("playing");

如果您想定位父母。

$(".buttons_mp3jpause").closest("li.song").addClass("playing");

或者你可以使用最近的找到最近的李与班级歌曲

如何使用jQuery向元素的父级添加类？

2 个答案:

回应第一条评论：

回复您的上次评论：

完整示例：