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