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

JQuery更改每次单击选择的背景

4 个答案: