javascript - Changing CSS value based on div value - Stack Overflow

admin管理员组

文章数量:1023187

I am trying to change the background of a cell in a css grid based on a value of a div that is pulled from a php database query.I'm using jquery to achieve the same function with another div, but the only difference is the value that is being pared is the same div in the css. Here is the div structure for the html. box datetime is a child of box a.

<div class='box a'>
<div class='box name'><a style='text-decoration:none; color:#444;' href='foobar' target='_blank'>Proper Name</a></div>
<div class='box mm'>75.49</div>
<div class='sog'>10.2</div>
<div class='box datetime'>1</div>

Here is the function i'm using.

$('.datetime').each(function(index, value) {

  var value = Number($(this).text());
  console.log(value);
  if (value < 4)
     $('.a').css('background-color', '#fff');
     else if (value >= 4 && value <= 15)
     $('.a').css('background-color', 'orange');
     else
     $('.a').css('background-color', 'purple');   

});

• .datetime is a whole number that represents the number of minutes bewteen 2 times.
• .a is the css grid cell that i want to change the css properties of.

Right now, it will only turn all of the .a background color to #fff. It will not evaluate correctly. What am I doing wrong?

I am trying to change the background of a cell in a css grid based on a value of a div that is pulled from a php database query.I'm using jquery to achieve the same function with another div, but the only difference is the value that is being pared is the same div in the css. Here is the div structure for the html. box datetime is a child of box a.

<div class='box a'>
<div class='box name'><a style='text-decoration:none; color:#444;' href='foobar.' target='_blank'>Proper Name</a></div>
<div class='box mm'>75.49</div>
<div class='sog'>10.2</div>
<div class='box datetime'>1</div>

Here is the function i'm using.

$('.datetime').each(function(index, value) {

  var value = Number($(this).text());
  console.log(value);
  if (value < 4)
     $('.a').css('background-color', '#fff');
     else if (value >= 4 && value <= 15)
     $('.a').css('background-color', 'orange');
     else
     $('.a').css('background-color', 'purple');   

});

• .datetime is a whole number that represents the number of minutes bewteen 2 times.
• .a is the css grid cell that i want to change the css properties of.

Right now, it will only turn all of the .a background color to #fff. It will not evaluate correctly. What am I doing wrong?

• javascript
• jquery
• css

Share Improve this question Follow edited May 22, 2018 at 14:48 cadillacace asked May 22, 2018 at 14:35 cadillacacecadillacace 861111 bronze badges 2

• Probably because value is always less than 4 (< 4) and that why fill it with background-color: #fff??? – Sider Topalov Commented May 22, 2018 at 14:48
• Sider, no the value can be anything, the example that i copied just happened to be 1. Also, #fff is just a placeholder to see if it's out of place since the page background is black. Thanks for mening! – cadillacace Commented May 22, 2018 at 14:53

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You're setting styling on all .a elements. The last value in the loop determines the value for all .a elements. To set them individually for each .datetime, get the parent (.a) element of each .datetime:

$('.datetime').each(function(index, value) {

  var value = Number($(this).text());
  console.log(value);

  var $elem = $(this).parent();

  if (value < 4)
     $elem.css('background-color', '#fff');
  else if (value >= 4 && value <= 15)
     $elem.css('background-color', 'orange');
  else
     $elem.css('background-color', 'purple');   

});

You are passing value in from .each but overwriting the value on the next line. Also you don't need to check that the value is <= 4 since you've already ruled out that the value isn't < 4. But I think the reason your code isn't working is because you are changing all .a to the color dictated by the last element processed:

$('.datetime').each(function(index, value) {

  var textValue = parseInt($(value).text());
  
  if (textValue < 4) {
    $(value).parent(".a").css('background-color', '#fff');
  } else if (textValue <= 15) {
    $(value).parent(".a").css('background-color', 'orange');
  } else {
    $(value).parent(".a").css('background-color', 'purple');
  }
});

body {
  background-color: green;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='box a'>
  <div class='box name'><a style='text-decoration:none; color:#444;' href='foobar.' target='_blank'>Proper Name</a></div>
  <div class='box mm'>75.49</div>
  <div class='sog'>10.2</div>
  <div class='box datetime'>3</div>
</div>

<div class='box a'>
  <div class='box name'><a style='text-decoration:none; color:#444;' href='foobar.' target='_blank'>Proper Name</a></div>
  <div class='box mm'>75.49</div>
  <div class='sog'>10.2</div>
  <div class='box datetime'>12</div>
</div>

<div class='box a'>
  <div class='box name'><a style='text-decoration:none; color:#444;' href='foobar.' target='_blank'>Proper Name</a></div>
  <div class='box mm'>75.49</div>
  <div class='sog'>10.2</div>
  <div class='box datetime'>18</div>
</div>

Try this:

  var value = Number($('.datetime').text());
  //console.log(value);
  if (value < 4)
     $(".a", '.datetime').css('background-color', '#fff');
  else if (value >= 4 && value <= 15)
     $(".a", '.datetime').css('background-color', 'orange');
  else
     $(".a", '.datetime').css('background-color', 'purple');   

..if you have a single group you dont need the each

I am trying to change the background of a cell in a css grid based on a value of a div that is pulled from a php database query.I'm using jquery to achieve the same function with another div, but the only difference is the value that is being pared is the same div in the css. Here is the div structure for the html. box datetime is a child of box a.

<div class='box a'>
<div class='box name'><a style='text-decoration:none; color:#444;' href='foobar' target='_blank'>Proper Name</a></div>
<div class='box mm'>75.49</div>
<div class='sog'>10.2</div>
<div class='box datetime'>1</div>

Here is the function i'm using.

$('.datetime').each(function(index, value) {

  var value = Number($(this).text());
  console.log(value);
  if (value < 4)
     $('.a').css('background-color', '#fff');
     else if (value >= 4 && value <= 15)
     $('.a').css('background-color', 'orange');
     else
     $('.a').css('background-color', 'purple');   

});

• .datetime is a whole number that represents the number of minutes bewteen 2 times.
• .a is the css grid cell that i want to change the css properties of.

Right now, it will only turn all of the .a background color to #fff. It will not evaluate correctly. What am I doing wrong?

I am trying to change the background of a cell in a css grid based on a value of a div that is pulled from a php database query.I'm using jquery to achieve the same function with another div, but the only difference is the value that is being pared is the same div in the css. Here is the div structure for the html. box datetime is a child of box a.

<div class='box a'>
<div class='box name'><a style='text-decoration:none; color:#444;' href='foobar.' target='_blank'>Proper Name</a></div>
<div class='box mm'>75.49</div>
<div class='sog'>10.2</div>
<div class='box datetime'>1</div>

Here is the function i'm using.

$('.datetime').each(function(index, value) {

  var value = Number($(this).text());
  console.log(value);
  if (value < 4)
     $('.a').css('background-color', '#fff');
     else if (value >= 4 && value <= 15)
     $('.a').css('background-color', 'orange');
     else
     $('.a').css('background-color', 'purple');   

});

• .datetime is a whole number that represents the number of minutes bewteen 2 times.
• .a is the css grid cell that i want to change the css properties of.

Right now, it will only turn all of the .a background color to #fff. It will not evaluate correctly. What am I doing wrong?

• javascript
• jquery
• css

Share Improve this question Follow edited May 22, 2018 at 14:48 cadillacace asked May 22, 2018 at 14:35 cadillacacecadillacace 861111 bronze badges 2

• Probably because value is always less than 4 (< 4) and that why fill it with background-color: #fff??? – Sider Topalov Commented May 22, 2018 at 14:48
• Sider, no the value can be anything, the example that i copied just happened to be 1. Also, #fff is just a placeholder to see if it's out of place since the page background is black. Thanks for mening! – cadillacace Commented May 22, 2018 at 14:53

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You're setting styling on all .a elements. The last value in the loop determines the value for all .a elements. To set them individually for each .datetime, get the parent (.a) element of each .datetime:

$('.datetime').each(function(index, value) {

  var value = Number($(this).text());
  console.log(value);

  var $elem = $(this).parent();

  if (value < 4)
     $elem.css('background-color', '#fff');
  else if (value >= 4 && value <= 15)
     $elem.css('background-color', 'orange');
  else
     $elem.css('background-color', 'purple');   

});

You are passing value in from .each but overwriting the value on the next line. Also you don't need to check that the value is <= 4 since you've already ruled out that the value isn't < 4. But I think the reason your code isn't working is because you are changing all .a to the color dictated by the last element processed:

$('.datetime').each(function(index, value) {

  var textValue = parseInt($(value).text());
  
  if (textValue < 4) {
    $(value).parent(".a").css('background-color', '#fff');
  } else if (textValue <= 15) {
    $(value).parent(".a").css('background-color', 'orange');
  } else {
    $(value).parent(".a").css('background-color', 'purple');
  }
});

body {
  background-color: green;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='box a'>
  <div class='box name'><a style='text-decoration:none; color:#444;' href='foobar.' target='_blank'>Proper Name</a></div>
  <div class='box mm'>75.49</div>
  <div class='sog'>10.2</div>
  <div class='box datetime'>3</div>
</div>

<div class='box a'>
  <div class='box name'><a style='text-decoration:none; color:#444;' href='foobar.' target='_blank'>Proper Name</a></div>
  <div class='box mm'>75.49</div>
  <div class='sog'>10.2</div>
  <div class='box datetime'>12</div>
</div>

<div class='box a'>
  <div class='box name'><a style='text-decoration:none; color:#444;' href='foobar.' target='_blank'>Proper Name</a></div>
  <div class='box mm'>75.49</div>
  <div class='sog'>10.2</div>
  <div class='box datetime'>18</div>
</div>

Try this:

  var value = Number($('.datetime').text());
  //console.log(value);
  if (value < 4)
     $(".a", '.datetime').css('background-color', '#fff');
  else if (value >= 4 && value <= 15)
     $(".a", '.datetime').css('background-color', 'orange');
  else
     $(".a", '.datetime').css('background-color', 'purple');   

..if you have a single group you dont need the each

本文标签： javascriptChanging CSS value based on div valueStack Overflow