Целевой CSS с разными значениями атрибутов?

Question

У меня есть клик btn, который будет динамически выбирать значения data-attr из html.

$(".template-seasonFinder li a[data-season=seasonX]").css("display","block"); 

и у меня есть переменная с именем seasonX, которые хранят data-season значений, но добавления переменной внутри селектора не будут работать.

Как я могу сделать его динамическим?

Answer 1

Вы должны использовать конкатенацию построить селектор:

$('.template-seasonFinder li a[data-season="' + seasonX + '"]') 

Answer 2

Вы можете превратить все в переменной.

yourvar = ".template-seasonFinder li a[data-season=" + seasonX + "]"; 
$(yourvar).css("display","block"); 

Answer 3

Другим возможным решением является использование метода filter (docs):

var winter = "summer"; //Adjusting for global warming 
$('.template-seasonFinder li a').filter(function(i, e) { 
    return $(this).data('season') == winter; 
});