Назначение класса css на основе значения атрибута html

Question

У меня есть несколько ссылок, как показано ниже. Мой метод JS возвращает либо «дни», либо «неделю». Исходя из этого возвращаемого значения, я хочу присвоить class = "active" одному из них, где значение периода данных соответствует возвращаемому значению. Может кто-нибудь, пожалуйста, предложите 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"); 

Это, конечно, предполагает свой метод, который «возвращает либо„дней“или" неделя»называется 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] результаты. К сожалению, это все равно приводит к удалению класса из элементов, которые в конечном итоге будут иметь его. Но это не имеет значения, если у вас нет тонны элементов (читай: сотни), у которых есть 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 ("активный");

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