JQuery的 - 通过数据属性=变量

Question

使用（自定义）的JQuery data-attributes检索，其中显示这些图标的元素，我成功地改变图标，这方面的工作代码中查找元素（S）：

<i class="glyphicon glyphicon-check" data-year="2014" data-flag_check="1"></i> 
... 
<script> 
    ... 
    $('i[data-year="2014"]').removeClass('glyphicon-check').addClass('glyphicon-unchecked'); 

但是，如果我尝试用变量替换常量2014，我的代码停止工作。

var yearIn = "2014"; 
$('i[data-year=yearIn]').removeClass('glyphicon-check').addClass('glyphicon-unchecked'); 

问： 是否有可能用一个变量执行此操作？

可能后续问题： 如果是这样，任何人都可以检测到我的语法有什么问题吗？

Answer 1

你只是缺少字符串连接：

var yearIn = "2014"; 
$('i[data-year=' + yearIn + ']').removeClass('glyphicon-check').addClass('glyphicon-unchecked'); 
// ------------^^^^^^^^^^^^^^ 

或者在ES2015 +，你可以使用文字用替代令牌的模板：

var yearIn = "2014"; 
    $(`i[data-year=${yearIn}]`).removeClass('glyphicon-check').addClass('glyphicon-unchecked'); 
// ^------------^^^^^^^^^-^ 

---

FWIW，我总是围绕使用引号当它来自一个变量时，选择器中的值，以防变量以空格结束，例如：

var yearIn = "2014"; 
$('i[data-year="' + yearIn + '"]').removeClass('glyphicon-check').addClass('glyphicon-unchecked'); 
// ------------^--------------^ 

或

var yearIn = "2014"; 
$(`i[data-year="${yearIn}"]`).removeClass('glyphicon-check').addClass('glyphicon-unchecked'); 
// ------------^---------^ 

Answer 2

您使用字符串字面'yearIn'而不是变量yearIn，做这样的事情来连接字符串：

$('i[data-year=' + yearIn + ']').removeClass('glyphicon-check').addClass('glyphicon-unchecked');