[英]Using .css(“background-color”) for comparison jQuery/Js
I am working on a project to make angled div
s where the break between each basic panel on a page is an angle if the div
has a background-image
on the previous div
, and a background-color
of green
on the next div
. 我工作的一个项目,使倾斜的div
S其中一个页面上的每个基本面板之间的突破是一个角度,如果div
有一个background-image
上一div
,和background-color
的green
在下div
。
I know I can't select pseudo classes directly so I decided to use the .addClass()
to show and hide the angle. 我知道我不能直接选择伪类,所以我决定使用.addClass()
来显示和隐藏角度。
The problem is my comparisons either turn all div
s green
, or adds angles to all the div
s. 问题是我的比较要么将所有div
变为green
,要么将角度添加到所有div
。 I think most of my problem is in my approach, but I'm not sure where I am going wrong. 我认为我的问题大部分都在我的方法中,但我不确定我哪里出错了。 Here is the JS and the jQuery so far, I'm just trying to make the comparison work so it is still rough: 到目前为止,这是JS和jQuery,我只是想让比较工作,所以它仍然很粗糙:
$(function() {
green = $('div').css("background-color", "rgb(0,255,0)");
if ($('.box').prev() === green)
{
$(this).addClass('withTop withoutTop');
//if ($(this).css("background-color") == green)
}
});
I have used regex to strip all but digits from the rgb but it seems to have the same effect. 我使用正则表达式来除去rgb中的所有数字,但它似乎具有相同的效果。 Thanks in advance and here is the link to the codepen. 在此先感谢,这里是codepen的链接。 http://codepen.io/AnomalousDevs/pen/GJmrrw http://codepen.io/AnomalousDevs/pen/GJmrrw
CSS and markup CSS和标记
$(function() { green = $('div').css("background-color", "rgb(0,255,0)"); if ($('.box').prev() === green) { $(this).addClass('withTop withoutTop'); //if ($(this).css("background-color") == green) } });
.box { height: 100px; width: 100%; /*background-color: rgb(0,255,0);*/ position: relative; } .box:nth-of-type(5) { background-color: green; /* background-image:url("http://www.google.com/imgres?imgurl=http://dreamatico.com/data_images/guitar/guitar-6.jpg&imgrefurl=http://dreamatico.com/guitar.html&h=851&w=1280&tbnid=DVUGPDoyiOu4sM:&zoom=1&docid=OlLKDKDUUigDoM&hl=en&ei=iqJzVcaEOcvAtQXW-oO4Cw&tbm=isch&ved=0CDwQMygKMAo");*/ } .box:nth-of-type(4) { background: red; position: relative; } .box:nth-of-type(3) { background: blue; } .box:nth-of-type(2) { background: rgb(0, 255, 0); } .box:nth-of-type(1) { background: lightblue; } .withTop::before { content: ''; position: absolute; background: black; width: 100%; /*top:-16px;*/ height: 30px; left: 0; transform: skewY(-1.3Deg); z-index: 1; } .withoutTop::after { content: ''; position: absolute; background: black; width: 100%; height: 30px; left: 0; transform: skewY(2Deg); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="parent"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box withTop"></div> </section>
Your question is not clear but I think that what you are trying to achieve is adding a class to the .box
after the green one. 你的问题不明确,但我认为你想要达到的目的是在绿色之后向.box
添加一个类。
Suggestion of base logic you should do: 建议你应该做的基本逻辑:
$(function() { var boxes = $('.box'), greenBox = ''; //for each box boxes.each(function(index) { //if this box is the green one if ($(this).css("background-color") === "rgb(0, 255, 0)") { greenBox = $(this); //addClass to the next one $(this).next().addClass('withTop'); } }); });
.box { height: 100px; width: 100%; /*background-color: rgb(0,255,0);*/ position: relative; } .box:nth-of-type(5) { background-color: green; /* background-image:url("http://www.google.com/imgres?imgurl=http://dreamatico.com/data_images/guitar/guitar-6.jpg&imgrefurl=http://dreamatico.com/guitar.html&h=851&w=1280&tbnid=DVUGPDoyiOu4sM:&zoom=1&docid=OlLKDKDUUigDoM&hl=en&ei=iqJzVcaEOcvAtQXW-oO4Cw&tbm=isch&ved=0CDwQMygKMAo");*/ } .box:nth-of-type(4) { background: red; position: relative; } .box:nth-of-type(3) { background: blue; } .box:nth-of-type(2) { background: rgb(0, 255, 0); } .box:nth-of-type(1) { background: lightblue; } .withTop::before { content: ''; position: absolute; background: black; width: 100%; /*top:-16px;*/ height: 30px; left: 0; transform: skewY(-1.3Deg); z-index: 1; } .withoutTop::after { content: ''; position: absolute; background: black; width: 100%; height: 30px; left: 0; transform: skewY(2Deg); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="parent"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box withTop"></div> </section>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.