jQuery如果类不存在,则更改CSS值

时间:2018-09-20 20:48:54

标签: javascript jquery html css

我正在尝试创建一个里尔脚本来浏览我的页面,并检查任何<div>中是否存在类。如果存在该课程,则不会采取任何措施。

它将寻找class="blue",如果找到它将不执行任何操作。如果未修饰class="blue",它将更改class="yellow"的背景颜色。它的作用是改变class="yellow"的背景颜色,无论如何。怎么了?

$("div").each(function() {
  if (jQuery(this).attr('class') != undefined && jQuery(this).hasClass('blue')) {} else {
    $('.yellow').css('background', 'green')
  }
});
.blue {
  background: blue;
  width: 100px;
  height: 100px;
}

.red {
  background: red;
  width: 100px;
  height: 100px;
}

.yellow {
  background: yellow;
  width: 100px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue">
  Blue
</div>

<div class="red">
  Red
</div>

<div class="yellow">
  Yellow
</div>

2 个答案:

答案 0 :(得分:2)

一个衬里...:)

http://jsfiddle.net/yak613/bcgajp6q/

基本上,您希望如果有蓝色,则.yellow是绿色。否则,它将保持黄色。

您可以通过拨动小提琴(上方)并取消对蓝色的注释来查看当蓝色出现时发生的情况。

if(!$(".blue").length) $(".yellow").css('background-color', 'green');
.blue {
  background: blue;
  width: 100px;
  height: 100px;
}

.red {
  background: red;
  width: 100px;
  height: 100px;
}

.yellow {
  background: yellow;
  width: 100px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <div class="blue">
  Blue
</div> -->
<div class="red">
  Red
</div>

<div class="yellow">
  Yellow
</div>

答案 1 :(得分:0)

您所需要做的只是检查目标元素是否没有.blue类(带有if (!$(this).hasClass('blue')))。

这可以在下面看到:

$("div").each(function() {
  if (!$(this).hasClass('blue')) {
    $('.yellow').css('background', 'green')
  }
});
.blue {
  background: blue;
  width: 100px;
  height: 100px;
}

.red {
  background: red;
  width: 100px;
  height: 100px;
}

.yellow {
  background: yellow;
  width: 100px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue">
  Blue
</div>

<div class="red">
  Red
</div>

<div class="yellow">
  Yellow
</div>