使用不同的属性值定位CSS？

Question

我有一个点击btn，可以动态地从html中选择data-attr值。

$(".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;
} );