一鍵更改多個字形

Question

我正在使用Bootstrap字形作為文件夾樹上多個節點的復選框。 單擊該文件夾的復選框時，我需要切換給定文件夾的所有glyphicon復選框（但僅此文件夾和復選框）。

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