繁体   English   中英

JQuery Target特定的li img onclick

[英]JQuery Target specific li img onclick

我有一个列表设置如下

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

既然你用jquery标记了这个问题就很容易了:

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

编辑:此外,为了便于阅读/简单起见,我onclickonclick移动到jquery函数...

如果您只是在寻找一个简单的图像交换,您可以在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);
}

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM