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

[alexein66]

Доброго дня!

Есть такой HTML

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

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

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

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

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

Как решить такую задачу на JS?

 

[sol_los]

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

Сразу поясню, что у span атрибут style="color: #73c85c" бывает другой

ниче не понял

 

[alexein66]

ниче не понял

надо скриптом проверять наличие style="color: #73c85c" и только тогда добавлять класс к блоку order-row

 

[sol_los]

надо скриптом проверять наличие style="color: #73c85c" и только тогда добавлять класс к блоку order-row

чистый js или Jquery?

 

[alexein66]

можно jquery

 

[sol_los]

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');

        }
    
    })
    

}

если я проснулся - должно работать

 

[alexein66]

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

function checkColor(color){

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

  checkColor('rgb(115, 200, 92)');

 

[sol_los]

а, ну да. в Rgb цвета.

 

[alexein66]

а, ну да. в Rgb цвета.

А как прописать условие если IF не выполняется? То есть если нет style="color" , то класс green убираем. Пробовал так

 function checkColor(color){

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

 

[sol_los]

сделай проще. по умолчанию удаляешь класс green, а если нужно - добавляешь

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

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

 

[SinTaksiS]

Я так накидал

const spans = document.querySelectorAll('span[style="color: #73c85c"]');
spans.forEach(span => {
  const parentDiv = span.closest('.order-row');
  if (parentDiv) {
    parentDiv.classList.add('green');
  }
});