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
中
• 具有click事件的div没有宽度

所以放一个

width: 200px;

进入#bathroom以使div可点击。

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