1

ユーザーがボタンをクリックしたときにボタンの画像の背景を変更したい。クラスに基づいて画像を切り替えるために、さまざまな属性を含むクラスを作成しました。私はこの方法を使用します：

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

しかし、ボタンをクリックする前でも後でも、画像はまったく表示されません。理由がわかりますか？

ありがとう

4

3 に答える 3

5

は#を示すために使用されidますが、クラスを切り替えています。これを試して：

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

.pause {
    width:100px;
    height:60px;
    background-image: url('19.jpg');
    float:left;
}
于 2012-05-22T14:11:41.647 に答える
3

問題は#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;
}
于 2012-05-22T14:12:40.570 に答える
2

関数の名前は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;
 }
于 2012-05-22T14:11:58.190 に答える