在按鈕之間切換 - 無法顯示圖像

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

的問題是，#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 2

的#用來表示一個id，但你要切換的類。試試這個：

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

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