JQuery - 通过data attribute = variable查找元素

时间:2017-07-29 12:30:12

标签: javascript jquery custom-data-attribute

使用(自定义)JQuery data-attributes来检索显示这些图标的元素,我使用此工作代码成功更改了图标:

<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');

问题: 是否可以使用变量执行此操作?

可能的后续问题: 如果是这样,任何人都可以检测到我的语法错误吗?

2 个答案:

答案 0 :(得分:2)

您只是缺少字符串连接:

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');
// ------------^---------^

答案 1 :(得分:1)

你正在使用字符串文字'yearIn'而不是变量yearIn,做这样的事情来连接字符串:

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