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

Posted 2023-05-08

【中文标题】JQuery改变每次点击选择的背景

【英文标题】：JQuery change background of select every click

【发布时间】：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');
 );

【参考方案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;