Question

我有以下几个链接。我的JS方法返回＆＃34;天＆＃34;或者＆＃34;周＆＃34;。基于该返回值，我想分配class =＆＃34; active＆＃34;其中一个数据周期值与返回值匹配。有人可以建议1-2行JS代码来实现这一点。

 <a href="#" class="hourlyChartPeriod" data-period="days">D</a>
 <a href="#" class="hourlyChartPeriod" data-period="week">W</a>

Answer 1

使用JQuery时非常简单：

$("a[data-period='" + someMethod() + "']").addClass("active");

这当然假设您的方法，＆＃34;返回＆＃39;天＆＃39;或者＆＃39;周＆＃39;＆＃34;被称为someMethod。

这里是CodePen demo。

如果您还需要确保其他不匹配的元素不具有active类，请将其从中移除。有几种方法可以做到这一点。这个很好很干净：

$("a[data-period]").removeClass("active");
$("a[data-period='" + someMethod() + "']").addClass("active");

......这是进一步优化的：

$("a[data-period]")
    .removeClass("active")
    .filter("a[data-period='" + someMethod() + "']")
    .addClass("active");

...因为它不会再次从DOM中重新选择，而是会重用那些初始a[data-period]结果。可悲的是，它仍然导致从最终拥有它的元素中删除类。但是，如果你没有{em>吨的元素（读数：数百），那么data-period就无所谓了。

尽管如此，如果你想（或需要）成为一个坚持不懈的人，这甚至会进一步优化：

$("a[data-period].active")
    .not($("a[data-period='" + someMethod() + "']").addClass("active"))
    .removeClass("active");

......但更难阅读。

Answer 2

jsReturnValue="The Return Value From Your JS Script"

var elems=Array.prototype.slice.call(document.querySelectorAll('.hourlyChartPeriod'));

var elem=elems.filter(function(e){return e.getAttribute('data-period')===jsReturnValue});

elem.classList.add('newClass')


// or you could use jQuery - which I suspect you might be

  var elems=jQuery('.hourlyChartPeriod');
  elems.filter(function(){
           return $(this).data('period')===jsReturnValue;
  }).addClass('yourNewClass');

Answer 3

你可以试试这个：

<script type="text/javascript">
    var a = document.getElementsByTagName("a");
    for(var i = 0; i < a.length; i++) {
        if(a[i].getAttribute("data-period")) {
            if(a[i].getAttribute("data-period") == <YOUR_VALUE>)
                a[i].classList.add("active");
        }
    }
</script>

要删除您使用的类：.classList.remove（＆＃34; active＆＃34;）;

Answer 4

你可以这样做：

var collection = document.getElementsByClassName("hourlyChartPeriod"),
    attr = '';
for (var i = 0; i < collection.length; i++) {
    attr = collection[i].getAttribute("data-period");

    switch (attr) {
        case "days":
            collection[i].style.color = "red";
            break;
        case "week":
            collection[i].style.color = "green";
            break;
        default:
            continue;
    } 
}

Example on JSFiddle

以下是使用jQuery的方法：

$('.hourlyChartPeriod').each(function() {

    switch ($(this).attr('data-period')) {
        case "days":
            $(this).addClass('red');
            break;
        case "week":
            $(this).addClass('green');
            break;
        default:
            break;
    }

});

Another JSFiddle

您甚至可以通过更改

将data-period名称附加为CSS类名称

$(this).addClass('red'); // change this
$(this).addClass($(this).attr('data-period')); // to this

虽然如果可以的话，只需添加类名即可。

Answer 5

没有jQuery，还有一种非常简单的方法：

var active = document.querySelectorAll('[data-period="' + return_value + '"]');

for (var i = 0; i < active.length; i++) {
  active[i].classList.add('active');
}

Fiddle

根据html属性值分配css类

5 个答案: