0
<div class="progress-bar-item-with-text">
                    <p>Количество сделок продажа</p>
                    <div class="progress-bar-item uk-margin-right">
                        <div class="progress-bar-activity" style="width: 10%">
                        </div>
                    </div>
                    <div class="uk-margin-remove-left uk-child-width-1-2@m" uk-grid>
                        <span class="progress-bar-text-down uk-text-right">1</span>
                        <span class="progress-bar-text-down uk-text-right"><b>1.2</b></span>
                    </div>
                </div>

У меня есть 6 штук блоков, каждые называются одинаково, только значения в теге <b>1.2</b> разные. Как сделать так, чтобы при значении в теге b > 1 к строке

<div class="progress-bar-activity" style="width: 10%"></div>

добавлялся один класс, а при значении в теге b < 1 добавлялся другой класс?

Делаю так:

$(document).ready(function() {
    if (parseFloat($('.progress-bar-item-with-text .progress-bar-text-down b').text()) > 1) {
        $('.progress-bar-item-with-text .progress-bar-item .progress-bar-activity').addClass("progress-bar-activity-more");
    }
    else {
        $('.progress-bar-item-with-text .progress-bar-item .progress-bar-activity').addClass("progress-bar-activity-less");
    }
}); 

Но, получается, что один класс добавляется ко всем классами <div class="progress-bar-activity" style="width: 10%"></div>

0

1 ответ 1

0

Надо было еще добавить высоту height к блоку чтобы было видно.

Если номер больше один будет показывать красный цвет иначе пурпурный.

$(document).ready(_ => {
    document.querySelectorAll(".progress-bar-text-down b").forEach(el => {
        if(el.innerHTML > 1){
             el
              .closest(".progress-bar-item-with-text")
              .querySelector(".progress-bar-activity")
              .classList.add("progress-bar-activity-more");
        }  else {
             el
              .closest(".progress-bar-item-with-text")
              .querySelector(".progress-bar-activity")
              .classList.add("progress-bar-activity-less");
        }
    });
});
.progress-bar-activity-more {
  background:red;
}
.progress-bar-activity-less {
  background:purple;
}
.progress-bar-activity {
  height:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="progress-bar-item-with-text">
    <p>Количество сделок продажа</p>
    <div class="progress-bar-item uk-margin-right">
        <div class="progress-bar-activity" style="width: 10%">
        </div>
    </div>
    <div class="uk-margin-remove-left uk-child-width-1-2@m" uk-grid>
        <span class="progress-bar-text-down uk-text-right">1</span>
        <span class="progress-bar-text-down uk-text-right"><b>2</b></span>
    </div>
</div>
<div class="progress-bar-item-with-text">
    <p>Количество сделок продажа</p>
    <div class="progress-bar-item uk-margin-right">
        <div class="progress-bar-activity" style="width: 10%">
        </div>
    </div>
    <div class="uk-margin-remove-left uk-child-width-1-2@m" uk-grid>
        <span class="progress-bar-text-down uk-text-right">1</span>
        <span class="progress-bar-text-down uk-text-right"><b>0</b></span>
    </div>
</div>
<div class="progress-bar-item-with-text">
    <p>Количество сделок продажа</p>
    <div class="progress-bar-item uk-margin-right">
        <div class="progress-bar-activity" style="width: 10%">
        </div>
    </div>
    <div class="uk-margin-remove-left uk-child-width-1-2@m" uk-grid>
        <span class="progress-bar-text-down uk-text-right">1</span>
        <span class="progress-bar-text-down uk-text-right"><b>0</b></span>
    </div>
</div><div class="progress-bar-item-with-text">
    <p>Количество сделок продажа</p>
    <div class="progress-bar-item uk-margin-right">
        <div class="progress-bar-activity" style="width: 10%">
        </div>
    </div>
    <div class="uk-margin-remove-left uk-child-width-1-2@m" uk-grid>
        <span class="progress-bar-text-down uk-text-right">1</span>
        <span class="progress-bar-text-down uk-text-right"><b>1.2</b></span>
    </div>
</div>

14
  • Думаю правильнее будет использовать >0.
    – De.Minov
    26 июл 2019 в 13:36
  • @CbIPoK2513 так у него условия <<Как сделать так, чтобы при значении в теге b > 1 к строке>>
    – Randall
    26 июл 2019 в 13:38
  • да, но мне что-то подсказывает, что 1 и -1 тоже должны "выделяться"
    – De.Minov
    26 июл 2019 в 13:39
  • @CbIPoK2513 лень менять )
    – Randall
    26 июл 2019 в 13:40
  • Да думаю не стоит, мой комментарий больше для автора вопроса подойдёт)
    – De.Minov
    26 июл 2019 в 13:41

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.