jQuery 图片切换

Question

使用 jQuery 从一张图片切换到另一张图片时遇到问题。没有收到任何控制台错误，所以我不确定问题出在哪里 - 任何建议将不胜感激。

HTML:

    <main>
        <div id="bathroom" class="switch"> </div>
    </main>

CSS:

#bathroom {
    position: absolute;
    top: 20%;
    left: 42%;
    height: 100%;

}

.switch {
    background-image: url('women.png');

}

.switchOn {
    background-image: url('men.png');
}

jQuery:

$('#bathroom').click(function(){

$('#bathroom').toggleClass('switchOn switch');

});

你可以在这里看到它的实际效果，虽然没有发生太多事情。我让 women.png 显示了一点，然后就消失了。

https://jsfiddle.net/c1g47o5u/

Answer 1

您的代码很好，除了两个小问题：

jquery 未包含在您的 jsfiddle 中
带点击事件的div没有宽度

所以放一个

width: 200px;

进入 #bathroom 使 div 可点击。

这是 jsfiddle 的固定版本： https://jsfiddle.net/2optdrbp/1/

jQuery 图片切换

jQuery image toggle

jquery

toggleclass