Как добавить класс к блоку когда у другого блока есть определенный style?

alexein66

Разрушитель (V)
Сообщения
184
Симпатии
45
Баллы
2 108
Доброго дня!

Есть такой HTML

HTML:
<div class="order-row">
    <span class="status-text" style="color: #73c85c"> Ожидание</span>
</div>

Как добавить класс к order-row если у span атрибут style="color: #73c85c"?

Чтобы было так:

HTML:
<div class="order-row green">
    <span class="status-text" style="color: #73c85c"> Ожидание</span>
</div>

Сразу поясню, что у span атрибут style="color: #73c85c" бывает другой, поэтому просто добавить класс к order-row не канает.

Как решить такую задачу на JS?
 
JavaScript:
function checkColor(color){

    let currentColor = $('.order-row >span').css('color');

    if(color == currentColor){

        $('.order-row').addClass('green');

    }

}

при обновлении страницы вызываем функцию
checkColor('#73c85c');


если кнопок на странице много и их все нужно проверить - тогда функция должна быть такой


function checkColor(color){

    $('.order-row').each(function(i){
    
        let currentColor = $(this).children().css('color');
        
        if(color == currentColor){

            $(this).addClass('green');

        }
    
    })
    

}

если я проснулся - должно работать
 
JavaScript:
function checkColor(color){

    let currentColor = $('.order-row >span').css('color');

    if(color == currentColor){

        $('.order-row').addClass('green');

    }

}

при обновлении страницы вызываем функцию
checkColor('#73c85c');


если кнопок на странице много и их все нужно проверить - тогда функция должна быть такой


function checkColor(color){

    $('.order-row').each(function(i){
   
        let currentColor = $(this).children().css('color');
       
        if(color == currentColor){

            $(this).addClass('green');

        }
   
    })
   

}

если я проснулся - должно работать
Вот так сработало, так как возвращает color в rgb
JavaScript:
function checkColor(color){

       let currentColor = $('.order-status-id span').css('color');
     
       if(color == currentColor){
    
          $('.order-row').addClass('green');
    
       }
        
 }

  checkColor('rgb(115, 200, 92)');
 
а, ну да. в Rgb цвета.
А как прописать условие если IF не выполняется? То есть если нет style="color" , то класс green убираем. Пробовал так
JavaScript:
 function checkColor(color){

       let currentColor = $('.order-status-id span').css('color');
      
       if(color === currentColor){
    
          $('.order-row').addClass('green');
    
       } else {
        $('.order-row').removeClass('green');
       }
      
        
 }
 
сделай проще. по умолчанию удаляешь класс green, а если нужно - добавляешь

JavaScript:
function checkColor(color){
    
        $('.order-row').removeClass('green');

       let currentColor = $('.order-status-id span').css('color');
      
       if(color === currentColor){
    
          $('.order-row').addClass('green');
    
       }     
      
        
 }
 
Я так накидал
JavaScript:
const spans = document.querySelectorAll('span[style="color: #73c85c"]');
spans.forEach(span => {
  const parentDiv = span.closest('.order-row');
  if (parentDiv) {
    parentDiv.classList.add('green');
  }
});
 
Назад
Верх