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

但是这个条件永远不会实现，因为我的这个选择器对于6个p标签是相同的，并且值来自数据库（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包含集合元素。因此，您需要使用each方法迭代此集合的元素。尝试使用以下

＆＃13;

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

＆＃13;

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

＆＃13;

如何从变量css的标记中获取值

2 个答案: