JQuery更改背景的選擇每一次點擊

Question

你好傢伙我試圖創建一個jQuery的功能，當他第一次點擊選擇按鈕時，背景將變爲白色，如果他再次點擊它將變成藍色，反之亦然

<select name="contact" class="changeBg"> 
    <option value="">Change!</option> 
    <option value="">Changes!</option> 
</select> 

$('.changeBg').click(function() { 
    $(this).css('background-color', 'green'); 
}); 

Answer 1

您可以嘗試使用.toggleClass(className, switch)在兩個類之間切換。

Live Demo

$('.changeBg').click(function() { 
    $(this).toggleClass('white blue'); 
}); 

Answer 2

Fiddle Demo

.toggleClass()

$('.changeBg').click(function() { //you can use change event 
    $(this).toggleClass('BgColor'); 
}); 

CSS

.changeBg { /* no need if your background is already white */ 
    background-color:#fff; 
} 
.BgColor { 
    background-color:blue; 
} 

Answer 3

嘗試與名切換它像

$('select[name="contact"]').change(function(){ 
    $(this).toggleClass('class1 class2'); 
}); 

對於這兩個類，你可以給背景色像

.class1 {background-color:pink;} 
.class2 {background-color:white;} 

即使你可以選擇類名像

$('.changeBg').change(function(){ 
    $(this).toggleClass('class1 class2'); 
}); 

但是，更好的是，您可以切換或切換2個不同的班級，而不是changebg。因爲如果您切換該班級，那麼第二次更改事件將不起作用。

Answer 4

$(function() { 
     $('.changeBg').change(function() { 
      $(this).toggleClass('whileClass BlackClass'); 
     }); 
    }); 

    .whileClass { 
     background-color: pink; 
    } 

    .BlackClass { 
     background-color: white; 
    }