javascript - 一键更改多个字形

Question

我使用 Bootstrap 字形作为文件夹树上多个节点的复选框。当单击该文件夹的复选框时，我需要切换给定文件夹的所有字形复选框(但仅限此文件夹和仅限复选框)。

<li data-layerid="Analises" data-grouped="group_Analises" class="parent_li">
  <span title="Collapse this branch"><i class="glyphicon glyphicon-file"></i> Analises</span>
  <i class="glyphicon glyphicon-unchecked" id="group_Analises" data-foldername="group_Analises"></i></li>

<li data-layerid="V%" data-grouped="2014">
  <span><i class="glyphicon glyphicon-file glyphicon-check"></i> V%</span>
  <i class="glyphicon glyphicon-check" id="2014" data-foldername="2014"></i> 
</li>
<li data-layerid="Ca" data-grouped="2014">
  <span><i class="glyphicon glyphicon-file glyphicon-check"></i> Ca</span>
  <i class="glyphicon glyphicon-check" id="2014" data-foldername="2014"></i> 
</li>

如果我这样做，我会更改页面上的所有字形。

$('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');

如果我尝试直接访问 id，我只能更改具有该 id 的第一个元素，而不是全部:

$('#2014').removeClass('glyphicon-check').addClass('glyphicon-unchecked');

非常欢迎提出建议。

Answer 1

尝试删除 DOM 上的 id 属性，改用 data-foldername 属性。

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