带有条件逻辑的JQuery .css()函数

Question

我正在某些JQuery函数中练习条件逻辑.$('h2').css({backgroundColor: 'red'});工作,但当我添加下面的条件逻辑时,它不再有效.如果我将返回值更改为字符串,它将消除错误,但它仍然不会更改背景颜色.我究竟做错了什么？

$('h2').css({function(){
    if (1 === 1){
        return backgroundColor: 'red';
    }
    else {
        return backgroundColor: 'purple';
    }
}});

Answer 1

您的示例代码将导致语法错误.您可以使用两种方法之一为jQuery.css使用回调函数.

具有属性及其回调函数的对象.

$('h2').css({
    backgroundColor: function(){
        if (1 === 1){
            return 'red';
        }
        else {
            return 'purple';
        }
    }
});

或者使用单个属性和回调函数对.

$('h2').css('backgroundColor', function(){
    if (1 === 1){
        return 'red';
    }
    else {
        return 'purple';
    }
});

通过这种方式,您可以有条件地应用每个元素的CSS.

Answer 2

试试这段代码:

$('h2').css({backgroundColor: (1 === 1) ? 'red' : 'purple'});

这是if条件的简写.

在这种情况下,if条件的简写更可靠和更清洁.

顺便说一句,这是一个普通的旧javascript.

希望能帮助到你.

Answer 3

迷人的思想实验!问题是您正在将函数引用传递给.css仅接受字符串和对象的函数.尝试封装函数,使其返回返回结果而不是函数引用:

$('h2').css((function(){
  if (1 === 1){
    return {backgroundColor: 'red'};
  }
  else {
    return {backgroundColor: 'purple'};
  }
})());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Cool thought experiment</h2>