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

Question

我希望按钮的图像背景在用户单击它时发生变化。我制作了一个包含不同属性的类，以根据它们的类在图像之间切换。我使用这种方法：

HTML：

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

JS：

    $(document).ready(function(){
    $('#play').click(function(){

    $(this).toggleClass("#pause");
    });
    });

CSS：

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

但是在我点击按钮之前和之后都没有显示图像，你知道为什么吗？

谢谢

Answer 1

#用于表示一个，id但您正在切换一个类。尝试这个：

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

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

Answer 2

问题是#pause不是css类的名称而是id。

你应该有这样的东西

HTML：

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

JS：

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

CSS：

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

Answer 3

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

HTML

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

JS

$(document).ready(function(){
    $('.play').click(function(){

        $(this).toggleClass("pause"); //lose the #
    });
});

CSS

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

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