JQuery Target specific li img onclick

Question

I have a list set up like below

<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>

What I am trying to do is when audioButton is clicked it starts playing the mp3, but what I also want it to do is an image swap on the soundBtn img to replace it with another image. How can I target that specific image inside that specific ul and NOT have the other items trigger the same image swap because they have the same class name '.soundBtn'?

Answer 1

Since you tagged this question with jquery it's fairly easy:

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

EDIT: Also, I would move native onclick to jquery function, for readability/simplicity sake...

Answer 2

If you're just looking for a simple image swap, you could do it in 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);
}

That will only affect the active line item. It's not going to actively "listen" to the selection and/or change dynamically, but it doesn't sound like you're looking for that anyway.