Question

我做了一个简单的IF语句，如果是，它会改变div的背景颜色（这个）。

＆＃13;

$(".inner").click(function(){
           
           console.log($(this).css('background-color'));
           
           if($(this).css('background-color') === 'rgb(255,255,255)'){
              $(this).css('background-color', 'rgb(0, 0, 0)');
               console.log("IF statement working")
           }/* else {
              $(this).css("background-color", "rgb(255,255,255)");  
           }*/
           
       });

＆＃13;

.outer{
    font-size: 0;
}

.inner{
    display: inline-block;
    background-color: white;
    height: 100px;
    width: 100px;
    border: 1px solid grey;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="application/javascript"></script>

<div class="outer">
           <div class="inner"></div>
           <div class="inner"></div>
       </div>
       <div class="outer">
           <div class="inner"></div>
           <div class="inner"></div>
       </div>

＆＃13;

但是第二个控制台日志没有出现，尽管第一个控制台日志打印了rgb('255, 255, 255')的正确颜色，但颜色不会改变。

我做错了什么？

Answer 1

这是因为您的IF语句不正确。

rgb(255,255,255)不等于rgb(255, 255, 255)

一个在值之间有空格，另一个不在

Answer 2

正如其他人所说，空间是根本原因。顺便说一句，如果你只想交换背景颜色，那么为什么不转换类名呢？

＆＃13;

do {
    let dogResults = try JSONDecoder().decode(Result.self, from: dogsJSONString.data(using: .utf8)!)
    print(dogResults.dogs1,dogResults.dogs2)
} catch {
    print(error)
}

＆＃13;

$(function() {
  $('.inner').on('click', function() {
    $(this).toggleClass('active');
  });
});

＆＃13;

.outer {
  font-size: 0;
}

.inner {
  display: inline-block;
  height: 100px;
  width: 100px;
  border: 1px solid grey;
  background-color: rgb(0, 0, 0);
  cursor: pointer;
}

.active {
  background-color: rgb(255, 255, 255);
}

＆＃13;

为什么我的IF语句不能在jQuery中工作？

2 个答案:

这是因为您的IF语句不正确。