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');
});

编辑：另外，为了便于阅读/简单起见，我会将本地onclick移动到jquery函数...

Answer 2

如果你只是在寻找一个简单的图像交换，你可以用CSS做到这一点：

.audioButton {
    list-style-type: none;
    list-style-position: outside;
    list-style-image: url(../img/sound_off.png);
}

.audioButton:hover, 
.audioButton:active {
    list-style-type: none;
    list-style-position: outside;
    list-style-image: url(../img/sound_on.png);
}

这只会影响有效的订单项。它不会主动“倾听”选择和/或动态变化，但听起来并不像你正在寻找那样。

JQuery Target特定的li img onclick

2 个答案: