jquery: change the style of a div depending on the text/number in it

Asked

Viewed 91 times

0

Friends, I have a list of items whose each item has a div which expresses remaining days with an automatic date countdown function. Example:

<ul class="items">
    <li class="item a"><div class="contagem-a">3 dias restantes</div></li>
    <li class="item b"><div class="contagem-b">8 dias restantes</div></li>
    <li class="item c"><div class="contagem-c">2 dias restantes</div></li>
    <li class="item d"><div class="contagem-d">6 dias restantes</div></li>
    <li class="item e"><div class="contagem-e">4 dias restantes</div></li>
</ul>

I want the background of the Divs to have a color according to the amount of days left over. Example: 1-2 days > red background. 3-4 days > yellow background. 5-6 day > green background. Because it is a large amount of items and the time changes automatically, I need it to be automated.

To do this, I imagine we need a function that identifies the alphanumeric order and can give access to the selected numbers from there...

Does anyone have any idea??

jquery

  • Instead of Jquery, you didn’t consider solving this with CSS only?

  • @Leandroangelo I don’t know how to do with CSS. how would it be?

2 answers

2


I created a function that will receive a number and return the class name for this.

Also, since the numbers are dynamic along with the rest of your string, I made an instruction that "filters" only the numbers in the string.

(function() {
  const items = document.querySelectorAll('.items .item div');

  for (let i = 0; i < items.length; i++) {
    const text = items[i].textContent; //Obtendo o conteúdo texto do elemento div que contém os contadores
    const number = parseInt(text.replace(/\D/g, "")); // Obtendo somente os números (dias) da string
    const bgClass = getClassBG(number);

    items[i].classList.add(bgClass); // Adicionando a classe ao elemento div
  }

  /* Obter a classe através do número */
  function getClassBG(number) {
    let bgClass = 'info';
    if (number >= 5) {
      bgClass = 'success';
    } else if (number >= 3) {
      bgClass = 'warning';
    } else {
      bgClass = 'danger';
    }

    return 'bg-' + bgClass;
  }
})();
.bg-success {
  background-color: green;
}

.bg-info {
  background-color: lightblue;
}

.bg-warning {
  background-color: yellow;
}

.bg-danger {
  background-color: red;
}
<ul class="items">
  <li class="item a">
    <div class="contagem-a">3 dias restantes</div>
  </li>
  <li class="item b">
    <div class="contagem-b">8 dias restantes</div>
  </li>
  <li class="item c">
    <div class="contagem-c">2 dias restantes</div>
  </li>
  <li class="item d">
    <div class="contagem-d">6 dias restantes</div>
  </li>
  <li class="item e">
    <div class="contagem-e">4 dias restantes</div>
  </li>
</ul>

  • 1

    Served perfectly! Thank you very much!!!

1

I would use a date type identifier on each div, so I know which is which ex: date-id="2" date-color="yellow"

In jquery I would use $(this). attr("data-id") to capture the value and which object I want to change the color.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.