Question

<div id="Button" ><a href="#">Button</a>
</div>
<div class="thumb" >Thumb</div>

-------------------------------

$('.thumb').addClass('new').css("background-color", "yellow");
callmeman();
$('#Button').click(function () {
    callmeman();
});

function callmeman(){
     if ($('.thumb').hasClass('new').css("background-color"," yellow")) {
         $('.thumb').css("background-color", "red");
     } else {
         $('.thumb').css("background-color", "yellow");
     }
 }

我想如果我点击按钮然后检查拇指是否为黄色然后将其更改为红色，如果我再次点击它会检查它的红色是否变为黄色等等。

还有其他方法来调用我这样做的函数： callmeman（）;

Answer 1

您可以查看hasClass()功能和css()功能。 hasClass函数不返回jQuery对象。 if语句正在查找TRUE/FALSE值。

$('.thumb').addClass('new').css("background-color", "yellow");
callmeman();
$('#Button').click(callmeman);

function callmeman(){
     if ($('.thumb').hasClass('new') && $('.thumb').css("background-color") == 'yellow') {
         $('.thumb').css("background-color", "red");
     } else {
         $('.thumb').css("background-color", "yellow");
     }
 }

Answer 2

我建议你创建2个类，即

.yellowClass {
    background-color: yellow;
}

.redClass {
    background-color: red;
}

然后使用.toggleClass()方法

根据类的存在或state参数的值，从匹配元素集中的每个元素添加或删除一个或多个类。

脚本

$('.thumb').addClass('new yellowClass');
function callmeman() {
    $('.thumb').toggleClass('yellowClass redClass');
}

Answer 3

制作两个css类：

.yellow{
 background-color : #FFFF00
}

.red{
 background-color : #FF0000
 }

最初添加类黄色

$('.thumb').addClass('yellow');

点击，只需切换这样的类

$('#Button').click(callmeman);
function callmeman(){
 $('.thumb').toggleClass('yellow red');
}

Answer 4

<强> HTML

<button id="button">button</button>
<div id="thumb" class="yellowBackground">thumb</div>

<强> CSS

.yellowBackground {
    background-color: yellow;
}
.redBackground {
    background-color: red;
}

JS （使用jQuery）

$(function() {
    $("#button").click(function() {
        changeThumb();
    });
});

function changeThumb() {
    $("#thumb").toggleClass("yellowBackground redBackground");
}

使用jquery更改颜色

4 个答案: