Question

我有以下代码，它将从a中获取值并应用一些css属性（如果它大于60）。

$(".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>

我无法弄清楚如何正确地写它。我从其他人那里复制了大部分代码。

由于

Answer 1

要实现此目的，您可以使用正则表达式在元素的文本中查找数值：

$(".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>

Answer 2

使用正则表达式从el.text().replace(/[^0-9]/g, '')

等文本中获取数字

$(".over").each(function() {
    var el = $(this);
    var value = parseFloat(el.text().replace(/[^0-9]/g, ''));
    console.log(value);
    if (value > 60) {
        el
            .css("font-weight", "bold")
            .css("color", "red");

    } else {

        el.css("font-weight", "bold");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<span class="over">This number is 60</span>
<span class="over">This number is 61</span>
</body>

Answer 3

尝试这个...

示例代码

$(".over").each(function() {
    var el = $(this);
    var val = el.text();
    var re = /\s*\s/;
    var lines = val.split(re); // it will return array with 4 element. 
    var value = parseFloat(el.text());
     if (lines[3] > 60) {       // here i'm using directly 4th no element
        el
            .css("font-weight", "bold")
            .css("color", "red");

      } else {

        el.css("font-weight", "bold");
      }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<span class="over">This number is 60</span>
<span class="over">This number is 61</span>
</body>

从<span>中获取价值并使用jQuery应用样式

3 个答案: