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;
 }

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

3 个答案: