如何从标记中获取用于更改css的值

Question

数据是以这种方式在模板中获得的(python / jango)，因此，从类中提取数据的标记p的数量会动态变化。

我的html：

{% for product in items %}
        <li>
            <p>{{ product.item_title }}</p>
            <p class="product-quantity">{{ product.quantity }}</p>
            <p>{{ product.price }}</p>
       </li>
{% endfor %}

我的js：

var quantity_block = $('.product-quantity'),
    quantity_number = parseInt(quantity_block.text());
console.log(quantity_number);

if (quantity_number < 10) {
    quantity_block.css(
        {'background-color': 'red'}
    )
}

但是这个条件永远不会被满足，因为我对6p标签有相同的选择器，并且值来自数据库(2，4，15，3.)它们是连在一起的- 24153，我在输出上得到了这样一个数字。

Answer 1

要么使用.each()

$('.product-quantity').each(function () {
    var quantity_block = $(this),
        quantity_number = parseInt(quantity_block.text());

    if (quantity_number < 10) {
        quantity_block.css('background-color', 'red');
    }
});

或.css( propertyName, function )

$('.product-quantity').css('background-color', function (index, oldValue) {
    var quantity_number = parseInt($(this).text());

    return quantity_number < 10 ? 'red' : oldValue;
})

Answer 2

quantity_block包含元素的集合。因此，您需要使用每一个方法迭代此集合的元素。试着使用以下方法

​

$('.product-quantity').each(function() {
  var quantity_number = parseInt($(this).text());
  console.log(quantity_number);
  if (quantity_number < 10) {
    $(this).css('background-color', 'red');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="product-quantity">7</p>
<p class="product-quantity">15</p>
<p class="product-quantity">8</p>

​