代码之家 › 专栏 › 技术社区 › J. Doe

为什么我的if语句不能在jquery中工作?

jquery javascript

-4

J. Doe · 技术社区 · 7 年前

我做了一个简单的if语句,如果为true,它将更改div的背景色(this)。

$(".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)");  
           }*/
           
       });

.outer{
    font-size: 0;
}

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

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

但是,尽管第一个控制台日志打印了正确的 rgb('255, 255, 255') .

我做错什么了?

2 回复 | 直到 7 年前

Kevin Jantzer 7 年前

这是因为你的假设不是真的。

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

一个值之间有空格,另一个值之间没有空格

user2575725 7 年前

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

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

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

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