根据类别值更改颜色
我有一个非常简单的脚本,我想根据它说的改变文本的颜色。根据类别值更改颜色
$(document).ready(function() {
if ($('.js-stock-level').val() == 'Sorry Not In Stock') {
$('.js-stock-level').css({ 'color': 'red', 'font-weight' : 'bold' });
}
else {
$('.js-stock-level').css({ 'color': 'green', 'font-weight' : 'bold' });
}
});
<p class="js-stock-level">Sorry Not In Stock</p>
<p class="js-stock-level">12 in Stock</p>
以编程方式它是有道理的,我试图实现,但它不工作。我觉得它与页面上的多个类有关,jQuery不知道要选择什么元素。
编辑
这里是剃刀
@if (item.StockLevel == 0)
{
<p class="js-stock-level">
@item.StockText
</p>
}
else
{
<p class="js-stock-level">
@item.StockText
</p>
<p>£@item.Price inc VAT</p>
<span>Quantity: </span><input type="number" style="width:35px" value="1" min="1" /><br /><br />
<button class="btn btn-primary">Add to basket</button>
}
更改val()
到text()
,它会工作。
至于其他的答案中提到,你必须使用.text()
而不是.val()
,你说你有相同的类名许多元素和有可能与文本Sorry Not In Stock
的元素必须在任何地方。
因此,当您有多个具有相同类名称的元素时,您必须迭代所有元素,如下面的。
希望这有助于
$('.js-stock-level').each(function(Index, Obj) {
if ($(Obj).text() == "Sorry Not In Stock") {
$(Obj).css({
'color': 'red',
'font-weight': 'bold'
});
} else {
$(Obj).css({
'color': 'green',
'font-weight': 'bold'
});
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="js-stock-level">Sorry Not In Stock</p>
<p class="js-stock-level">12 in Stock</p>
更新(根据RAZOR)
@{
var NoStockText = "Sorry Not In Stock";
var StockText = "Sorry Not In Stock";
}
<p @if(StockText==NoStockText){<text>style='color:red;'</text>}>@StockText</p>
而且StockText
是你@item.StockText
嗯,这是最好的答案呢。我并没有开始认为这也可能是因为内容是使用Razor(C#)生成的。所以当这个脚本运行时,jQuery并没有捕获它。 – JohnCooling
razor在页面加载中呈现HTML,所以在'document.ready'中写入上面的JS,并且您的信息可以在没有JS的RAZOR中实现。在使用这个代码之前先试一下,因为使用这会给用户带来一种小故障,首先它会是黑色或者一些默认颜色,然后变成红色,看起来不太好。 @JohnCooling –
@JohnCooling,我更新了答案。我只是使用,如果条件只是为了展示如何在RAZOR中实现这一点。 –
说明
如果要根据其他属性(如示例中的文本值)更改元素的某些CSS属性,则可以使用.css(propertyName, function)
。
但是,为了简化造型元素,我建议使用CSS类。为了改变元素的类别,我们将使用另一个jQuery方法,.addClass(function)
。
实施例1 - 使用的CSS(propertyName的,功能)
$(document).ready(function() {
$('.js-stock-level').css('color', function(elm) {
var text = $(this).text();
return (text == 'Sorry Not In Stock' ? 'red' : 'green');
});
});
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<p class="js-stock-level">Sorry Not In Stock</p>
<p class="js-stock-level">12 in Stock</p>
实施例2 - 用.addClass(功能)
var NOT_IN_STOCK_TEXT = 'Sorry Not In Stock',
NOT_IN_STOCK_CLASS = 'not-in-stock';
$(document).ready(function() {
$('.js-stock-level').addClass(function() {
return $(this).text() === NOT_IN_STOCK_TEXT ? NOT_IN_STOCK_CLASS : '';
});
});
.js-stock-level {
color: green;
}
.js-stock-level.not-in-stock {
color: red;
font-weight: bold;
}
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<p class="js-stock-level">Sorry Not In Stock</p>
<p class="js-stock-level">12 in Stock</p>
使用Razor管理解决此问题
请参阅下面的工作代码。
@if (item.StockText == "Sorry Not In Stock")
{
<p class="js-stock-level not-in-stock">
@item.StockText
</p>
}
else
{
<p class="js-stock-level">
@item.StockText
</p>
<p>£@item.Price inc VAT</p>
<span>Quantity: </span><input type="number" style="width:35px" value="1" min="1" /><br /><br />
<button class="btn btn-primary">Add to basket</button>
}
一旦我检查了文本,我刚刚添加了无库存css类的元素。
似乎仍然直接去其他地方,并设置颜色为绿色 – JohnCooling
嘿检查此演示http://jsfiddle.net/vn73uLxd/ – Diptox