Блог

Главная - Вопросы по программированию - измените цвет, когда число уменьшится

измените цвет, когда число уменьшится

#javascript

Вопрос:

Я пытаюсь изменить имя класса на элемент, когда его значение уменьшается

Мой взгляд на лезвие-это foreach 

 @foreach ($scaduti as $item )
    <tr>
       <td>{{$item->name}}</td>
       <td>{{$item->lotto}}</td>
       <td>{{carbonCarbon::createFromFormat('Y-m-d', $item->data_di_scadenza)->format('d-m-Y')}}</td>
       <td>{{$item->sector->settore}}</td>
       <td>{{$item->sector->scaffale}}</td>
       <td id="changecolor">{{$item->sector->quantita_rimanente - $item->sector->quantita_bloccata}}</td>
       <td>{{$item->sector->quantita_bloccata}}</td>


    </tr>
 @endforeach

Я хочу добавить класс td с идентификатором «changecolor»

Мой сценарий таков:

 var x = document.getElementById("changecolor").innerHTML;
var i;
for (i = 0; i < x.length; i  ) {
    if(x[i] <= 20){
         document.getElementById('changecolor').className= 'changetored';
        }

}

Цвет применяется только к первому элементу foreach и игнорирует все остальные.

Я хочу применить его ко всем foreach результатам, которые учитывают, если

Извините за мой плохой английский.

Комментарии:

1. Идентификаторы должны быть уникальными на странице.

Ответ №1:

Проблема, как говорили многие пользователи, в однозначности идентификатора. Как это легко решить? Допустим, у вас есть id на $item , которое является прогрессивным числом от 0 до …

В этом случае вы могли бы сделать что-то вроде:

 @foreach ($scaduti as $item )
    <tr>
       <td>{{$item->name}}</td>
       <td>{{$item->lotto}}</td>
       <td>{{carbonCarbon::createFromFormat('Y-m-d', $item->data_di_scadenza)->format('d-m-Y')}}</td>
       <td>{{$item->sector->settore}}</td>
       <td>{{$item->sector->scaffale}}</td>
       <td id="{{ $item->id }}">{{$item->sector->quantita_rimanente - $item->sector->quantita_bloccata}}</td>
       <td>{{$item->sector->quantita_bloccata}}</td>


    </tr>
 @endforeach

Затем сценарий становится:

 var i;
for (i = 0; i < length of scaduti; i  ) {
    var x = document.getElementById(i).innerHTML;
    if(x[i] <= 20){
         document.getElementById(i).className= 'changetored';
    }

}

Ответ №2:

document.getElementById всегда будет выдавать вам один элемент. Большую часть времени первый элемент, который он находит.

Вместо того, чтобы давать каждому элементу один и тот же идентификатор, дайте им одно и то же имя, например

 <td name="changecolor">{{$item->sector->quantita_rimanente - $item->sector->quantita_bloccata}}</td>

затем используйте : document.getElementsByName("changecolor")

Это даст всем элементам имя «изменить цвет».

Вы можете перебирать эти элементы и делать то, что хотите.

Ваш измененный код будет выглядеть примерно так:

 var x = document.getElementsByName("changecolor");
var i;

for (i = 0; i < x.length; i  ) {
    if(x[i].innerHTML <= 20){
         x[i].className = "changetored";
        }

}

Комментарии:

1. большое вам спасибо, похоже, это решило проблему

2. Привет @alessioscionti если это работает для вас, вы можете принять ответ, чтобы остановить новые ответы.

Ответ №3:

Это происходит потому, что вы используете атрибут id более одного раза. Идентификатор должен отображаться на странице только один раз. Есть несколько способов решить эту проблему:

  1. измените идентификатор на class=’changecolor’, затем повторите все элементы с классом changecolor.
  2. пройдите через s и измените цвет 6-го

Я бы посоветовал поискать документ.querySelector поможет в этом.

Метки: ,