Jquery 根据其父类更改 SVG 类和片段标识符答案

【问题标题】：Jquery change SVG class and fragment identifier depending on their it's parent classJquery 根据其父类更改 SVG 类和片段标识符
【发布时间】：2015-08-04 12:28:44
【问题描述】：

我正在制作一个带有步骤的进度条，它们是两个 SVG 图标、一个复选标记和一个通过 SVG 精灵加载的向下箭头。

向下箭头指示您当前在进度条中所处的步骤。

这是带有复选标记的栏。

  <li class="progress-done">
    <center>
      <div class="icon-wrap">
        <svg class="icon-check-mark">
          <use xlink:href="#icon-check-mark"></use>
        </svg>
      </div>
      <span class="progress-text">Assistance</span>
    </center>
  </li>

对于当前步骤，在 li 元素中添加了一个名为“progress-current”的附加类。

  <li class="progress-done progress-current">
    <center>
      <div class="icon-wrap">
        <svg class="icon-check-mark">
          <use xlink:href="#icon-check-mark"></use>
        </svg>
      </div>
      <span class="progress-text">Assistance</span>
    </center>
  </li>

这是进度条的完整 Codepen。

http://codepen.io/covanant/pen/YXRMrY

我想要完成的是，只要存在“progress-current”类，jQuery 就会将 SVG 类和片段标识符从“icon-check-mark”更改为“icon-down-arrow”。

注意：SVG 类和片段标识符始终具有相同的名称。

【问题讨论】：

标签： javascript jquery svg addclass removeclass

【解决方案1】：

为什么不将两个 <use> 元素都放在 SVG 中？

  <li class="progress-done">
    <center>
      <div class="icon-wrap">
        <svg class="icon-check-mark">
          <use xlink:href="#icon-check-mark" class="check-ref"></use>
          <use xlink:href="#icon-down-arrow" class="down-ref"></use>
        </svg>
      </div>
      <span class="progress-text">Assistance</span>
    </center>
  </li>

然后定义down-ref默认隐藏。

.down-ref {
   visibility: hidden;
}

然后在设置progress-current时切换可见性。

.progress-current svg use.check-ref {
   visibility: hidden;
}

.progress-current svg use.down-ref {
   visibility: visible;
}

不需要 JS。

【讨论】：