Javascript 在按钮之间切换-无法显示图像

我想改变按钮的图像背景，当用户点击它。 我制作了一个包含不同属性的类，以根据它们的类在图像之间切换。 我使用这种方法：

HTML:

     <span id="play"></span>

     <span id="play" class="play"></span>

CSS:

但是图像根本不显示，无论是在我点击按钮之前还是之后，你知道为什么吗

谢谢

使用

#

来表示

id

，但是您正在切换一个类。试试这个：

$('#play').click(function(){
    $(this).toggleClass("pause");
});

。暂停{
宽度：100px；
高度：60px；
背景图片：url（'19.jpg'）；
浮动：左；
}

使用

#

表示

id

，但您正在切换一个类。试试这个：

$('#play').click(function(){
    $(this).toggleClass("pause");
});

。暂停{
宽度：100px；
高度：60px；
背景图片：url（'19.jpg'）；
浮动：左；
}

函数的名称为toggleClass。它切换一个类，您使用的是ID

HTML

CSS

---

该函数的名称为toggleClass。它切换一个类，您使用的是ID

HTML

CSS

问题在于，

#pause

不是css类的名称，而是一个id

你应该有这样的东西

HTML:

     <span id="play"></span>

     <span id="play" class="play"></span>

CSS:

问题在于，

#pause

不是css类的名称，而是一个id

你应该有这样的东西

HTML:

     <span id="play"></span>

     <span id="play" class="play"></span>

CSS:

    $(document).ready(function(){
        $('#play').click(function(){                             
            $(this).toggleClass("pause");
            $(this).toggleClass("play");
        });
    });

.play
{
    width:100px;
    height:60px;
    background-image: url('18.jpg');
    float:left;
}
.pause
{
    width:100px;
    height:60px;
    background-image: url('19.jpg');
    float:left;
}