jquery - 从 <span> 中获取值并使用 jQuery 应用样式类

标签 jquery css

我有以下代码,它将从 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/

相关文章:

javascript - jQuery(或常规 Javascript)在按下后退按钮后加载页面时执行功能

jQuery Flot - 力轴值

jquery - 固定定位的 div 不尊重相对定位的父级?

html - 如何创建全 Angular 背景视频(Vimeo)?在Bootstrap环境中

html - 显示图像后的下拉菜单

javascript - swf 文件作为超链接

javascript - Internet Explorer 禁用/启用按钮。按钮保持禁用状态,直到用户将鼠标移到窗口上

javascript - jquery switch 来更改附加到的列表

HTML:为什么元素占用这么多宽度?

html - 为 Bootstrap 的折叠导航栏提供有组织的布局