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>

Answer 4

更清洁在样式表文件中保留您的风格并且更清洁使用toggleClass处理程序

.highlight{//Put this in your style sheet file
    background-color : red;
}

'//===>This will add the to the element the highlight if it doesn't have it or else will returned back to the original style

$('h2').on('click',function(){
    $(this)toggleClass('highlight');
})

带有条件逻辑的JQuery .css（）函数

4 个答案: