使用jQuery切換按鈕顏色切換

我正在尋找更改按鈕的顏色，或者在這種情況下，每次在jQuery的切換按鈕上選擇按鈕的圖像。這是我迄今爲止的jQuery。使用jQuery切換按鈕顏色切換

jQuery(document).ready(function() { 
    jQuery('#occupation').hide(); 
    jQuery('#occupationshow').on('click', function (event) { 
     jQuery('#occupation').toggle(); 
    }); 
});

這裏就是我有一個按鈕：

<button id="occupationshow"> 
    <img src="../SiteAssets/images/RAC/askcut/Occupation.jpg"> 
</button>

我怎樣才能得到它讓按鈕被點擊時，另一圖像顯示上的按鈕？

來源

2015-06-08 Steven Dewar

最好的方式做到這一點，我認爲以下幾點：

此按鈕創建兩個背景的精靈形象 - 所以，一個圖像文件，用兩幅圖像並排。
使用CSS設置此圖像作爲元素的background-image
給你的button#occupationshow一個固定的寬度/高度，都取決於按鈕的狀態jQuery的修改圖像的background-position - 簡單地說，根據當前按鈕的狀態，圖像將在button#occupationshow內左右移動，您將只能在任何時候看到相關部件。

您可以按照建議動態修改src屬性，但請記住，使用此方法時，一旦單擊該按鈕，新圖像可能需要一些時間加載;用我的方法，這兩個圖像都是預加載的（因爲它們是一個圖像），它只是四處移動，所以是瞬間的。

Sprites是工作的一個很好的方式，我建議你尋找到他們:-)

來源

2015-06-08 12:47:09 d0ug7a5

您可以使用jQuery的css函數在每次點擊時更改按鈕的背景圖像。

來源

2015-06-08 12:39:36

toggle()默認爲顯示/隱藏。使用attr()有一個回調函數

jQuery('#occupationshow').on('click', function (event) { 
    jQuery(this).find('img').attr('src', function(){ 
     var src = $(this).attr('src') == 'img1' ? 'img2' : 'img1'; 
     return src; 
    }); 
});

來源

2015-06-08 12:40:23 AmmarCSE

我猜你只有兩個圖像，對不對？所以你可以做的是把兩個標籤，對應你的兩個圖像，ont被設置爲「display：none」。

<button id="occupationshow"> 
    <img src="../img1.jpg"> 
    <img src="../img2.jpg" style="display: none;"> 
</button>

而在jQuery的代碼將是：

jQuery('#occupationshow').on('click', function (e) { 
    jQuery('#occupationshow img').toggle(); 
});

編輯：我又重新看了第一篇文章，不知道是什麼讓我猜OP只有兩個圖像.. （事實上他想用「切換」，我猜）

來源

2015-06-08 12:50:39

使用jQuery切換按鈕顏色切換

回答

相關問題