主页 / 问题 / 1007005
Accepted
Виктор Тюрин
Asked:2020-07-26 21:04:39 +0000 UTC2020-07-26 21:04:39 +0000 UTC

jQuery 和同名

  • 772
<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>

jquery

1 个回答

  1. Best Answer

    有必要为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>

    • 0

相关问题