JQuery Target特定的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');
});

編輯：此外，為了便於閱讀/簡單起見，我onclick生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);
}

這只會影響有效的訂單項。 它不會主動“傾聽”選擇和/或動態變化，但聽起來並不像你正在尋找那樣。