javascript - JQuery 目标特定 li img onclick

Question

我有一个如下所示的列表

<ul id="playlist">
        <li class="controls"><a class="collapsed">WAKE ALL MY YOUTH</a>
            <ul>
                <li class="buy" ><a href="#" target="_blank">CLICK HERE</a></li>
            </ul>
        </li>

        <li class="controls">
            <ul>
                <li class="audioButton" onclick="changeVideo(0);" href="assets/music/rain_of_gold">RAIN OF GOLD
                <img class="soundBtn" src="img/sound_off.png"/></li>
            </ul>
        </li>
        <li class="controls">
            <ul>
                <li class="audioButton" onclick="changeVideo(1);" href="assets/music/enter_through_the_sun">ENTER THROUGH THE SUN</li>
                <img class="soundBtn" src="img/sound_off.png"/>
            </ul>
        </li>
        <li class="controls">
            <ul>
                <li class="audioButton" onclick="changeVideo(2);" href="assets/music/white_doves">WHITE DOVES</li>
                <img class="soundBtn" src="img/sound_off.png"/>
            </ul>
        </li>
        <li class="controls">
            <ul>
                <li class="audioButton" onclick="changeVideo(3);" href="assets/music/against_the_wall">AGAINST THE WALL</li>
                <img class="soundBtn" src="img/sound_off.png"/>
            </ul>
        </li>
        <li class="controls">
            <ul>
                <li class="audioButton" onclick="changeVideo(4);" href="assets/music/beaches">BEACHES</li>
                <img class="soundBtn" src="img/sound_off.png"/>
            </ul>
        </li>
        <li class="controls">
            <ul>
                <li class="audioButton" onclick="changeVideo(5);" href="assets/music/let_you_sleep_tonight">LET YOU SLEEP TONIGHT</li>
                <img class="soundBtn" src="img/sound_off.png"/>
            </ul>
        </li>
        <li class="controls">
            <ul>
                <li class="audioButton" onclick="changeVideo(6);" href="assets/music/final_call">FINAL CALL</li>
                <img class="soundBtn" src="img/sound_off.png"/>
            </ul>
        </li>
    </ul>

我想要做的是当 audioButton 被点击时它开始播放 mp3，但我还想要它做的是在 soundBtn img 上进行图像交换以将其替换为另一个图像。我如何才能在特定的 ul 中定位特定的图像，而不是让其他元素触发相同的图像交换，因为它们具有相同的类名“.soundBtn”？

Answer 1

因为你用 jquery 标记了这个问题，所以很容易:

$('.audioButton').click(function(){
    // play MP3 file
    // .next() targets next element's sibling
    $(this).next().attr('src', 'some_othe_image.jpg');
});

编辑:此外，为了可读性/简单性，我会将 native onclick 移动到 jquery 函数......