JQuery改变每次点击选择的背景答案

【问题标题】：JQuery change background of select every clickJQuery改变每次点击选择的背景
【发布时间】：2014-05-13 04:01:30
【问题描述】：

大家好，我正在尝试创建一个 jquery 函数，当他第一次单击选择按钮时，背景将变为白色，如果再次单击，则会变为蓝色，反之亦然

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

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

【问题讨论】：

标签： jquery css select onclick logic

【解决方案1】：

您可以尝试使用.toggleClass( className, switch ) 在两个类之间切换。

Live Demo

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

【讨论】：

【解决方案2】：

尝试用 name 来切换它

$('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。因为如果您切换该类，那么第二次更改事件将不起作用。

【讨论】：

【解决方案3】：

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

【讨论】：

酷！非常感谢！ ^_^
@user2533808 欢迎很高兴 :)

【解决方案4】：

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

    .whileClass {
        background-color: pink;
    }

    .BlackClass {
        background-color: white;
    }

【讨论】：