1

我有以下 HTML 可以出现，但一次只能出现一个：

<a id="menuRange" class="button" href="#">1 - 100</a>
<a id="menuRange" class="button" href="#">101 - 200</a>
<a id="menuRange" class="button" href="#">201 - 300</a>

我用这段代码来获取范围：

var $field = $('#menuRange');
var nums = $field.text().split('-').map(function (a) {
    return parseInt(a, 10) + d * 100
});

现在我想将 HTML 更改为：

<a id="menuRange" class="button" href="#">Lines 1 - 100</a>
<a id="menuRange" class="button" href="#">Lines 101 - 200</a>
<a id="menuRange" class="button" href="#">Lines 201 - 300</a>

我怎样才能做到这一点，所以我仍然像以前一样获得 nums 数据。换句话说，我怎样才能让它忽略“线条”这个词，就好像它不存在一样？

4

2 回答 2

5

只需放一个.substring()after .text()：

var nums = $field.text().substring(6).split('-')...

即只删除返回文本的前 6 个字符。

或者，如果前缀并不总是存在：

var nums = $field.text().replace(/^Lines /, '').split('-')
于 2012-06-25T11:10:05.097 回答
2

如果您希望完全自由地放置在锚点内容中的内容，请将代码用于计算的值移动到属性中。然后你可以改变你对用户看到的内容的想法，而根本不需要改变你的 JS 代码：

<a id="menuRange" class="button" href="#" data-lines="1-100">Lines 1 - 100</a>
<a id="menuRange" class="button" href="#" data-lines="101-200">Anything here</a>
<a id="menuRange" class="button" href="#" data-lines="201-300">still works</a>

var $field = $('#menuRange');
var nums = $field.attr("data-lines").split('-').map(function (a) {
    return parseInt(a, 10) + d * 100
});

您可以为最小值和最大值选择单独的属性：

<a id="menuRange" class="button" href="#" data-min="1" data-max="100">Lines 1 - 100</a>

然后您可以单独检索它们，而不是从单个字符串中拆分出来：

var min = $field.attr("data-min"),  // to get it as a string
    max = $field.attr("data-max");  // use .attr()
// OR
var min = $field.data("min"),       // to have jQuery automatically convert
    max = $field.data("max");       // it to a number use .data()
于 2012-06-25T11:32:18.823 回答