Question

首先让我为编写jQuery的糟糕尝试道歉。我是一名贸易设计师。

我有一个表格，并希望在范围输入值与<th> ID匹配时将活动类添加到<th>。

HTML：

<input type="range" name="levels" min="1" max="9" />
<table id="levels">
    <thead>
        <tr>
            <th>*</th>
            <th id="1">Bronze</th>
            <th id="2">Silver</th>
            <th id="3">Gold</th>
            <th id="4">Platinum</th>
        </tr>
    </thead>
</table>

jQuery到目前为止：

$(document).ready(function(){
    $('[type=range]').change(function() {
        var rangeval = $(this).val();
        var th = $("levels th");
        //$("#1").addClass(rangeval);

        if (th.attr("id") == rangeval) {
            $(this).addClass('active');
        }
    });
});

我意识到我还需要在更改时取消设置活动类，但我只是想让jQuery首先添加一个类。

Answer 1

尝试这样的事情： -

$(document).ready(function(){
    $('input[type=range]').change(function() {
        var rangeval = $(this).val();
        $('#levels th').removeClass();
        $('#levels th#' + rangeval).addClass('active');
    });
});

Working Demo

Answer 2

您不需要为此使用if语句，因为您可以从范围input的值构建ID选择器。试试这个：

$('[type=range]').change(function() {
    $('th').removeClass('active').filter('#' + this.value).addClass('active');
});

Working example

请注意，上面删除了先前在任何元素上设置的active类，以便一次只能显示一个活动。

Answer 3

你正在使用ID选择器，所以应该像

var th = $("#levels th");

否则会将其视为标签名称。

Answer 4

确保id的{{1}}选择器正确无误。

然后，您可以执行以下操作：

从levels
将th类添加到与所选值匹配的类
```
active
```

演示：https://jsfiddle.net/rLn0w77j/1/

如果输入范围值与id

4 个答案: