我有以下代码,它将从 a 中获取值,并在它大于 60 时应用一些 css 属性。
$(".over").each(function() {
var el = $(this);
var value = parseFloat(el.text());
if (value > 60) {
el
.css("font-weight", "bold")
.css("color", "red");
} else {
el.css("font-weight", "bold");
}
});
<body>
<span class="over">60</span>
<span class="over">61</span>
</body>
但是,我还需要在其中添加一些文本,因此我需要调整代码以查找字符串中的值,如果大于 60,则应用 css。 例如:
<body>
<span class="over">This number is 60</span>
<span class="over">This number is 61</span>
</body>
我不知道如何正确地写它。我从别人那里复制了大部分代码。
谢谢
最佳答案
要实现此目的,您可以使用正则表达式来查找元素文本中的数值:
$(".over").each(function() {
var $el = $(this);
var value = parseFloat($el.text().match(/\d+/)[0]);
if (value > 60) {
$el.css({
"font-weight": "bold",
"color": "red"
});
} else {
$el.css("font-weight", "bold");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="over">This number is 60</span>
<span class="over">This number is 61</span>
<span class="over">62 is the number</span>
您应该注意,在 JS 代码中设置 CSS 属性通常被认为是不好的做法,应该避免。要解决此问题,您可以使用类来应用样式并使用 JS 代码根据需要更改类。试试这个:
$(".over").each(function() {
var $el = $(this);
var value = parseFloat($el.text().match(/\d+/)[0]);
$el.toggleClass('foo', value > 60);
});
.over {
font-weight: bold;
}
.over.foo {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="over">This number is 60</span>
<span class="over">This number is 61</span>
<span class="over">62 is the number</span>
关于jquery - 从 <span> 中获取值并使用 jQuery 应用样式类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41998152/