Using .css ("background-color") for jQuery / Js comparison
I'm working on a project at an angle div
where the gap between each base panel on the page is an angle if it div
has background-image
in the previous one div
and a background-color
green
in the next div
.
I know that I cannot select the pseudo classes directly, so I decided to use .addClass()
to show and hide the corner.
The problem is that my comparisons either turn everything div
green
or add corners to all div
s. I think most of my problem is related to my approach, but I'm not sure where I am going wrong. Here is JS and jQuery so far, I'm just trying to make a comparison, so it's still crude:
$(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've used regex to strip everything but numbers from rgb, but it seems to have the same effect. Thanks in advance and here is the link to the code. http://codepen.io/AnomalousDevs/pen/GJmrrw
CSS and markup
$(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>
source to share
Your question is not clear, but I think you are trying to achieve adding a class to .box
after green.
Basic logic proposal:
$(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>
source to share