使用 Javascript 添加 class 和 ID 到 headers

Question

Zendesk 的帮助中心的工作方式是将所有部分打印到页面上而不给它们任何唯一标识符，因此如果您想实施任何类型的 scrollspy（根据您所在的位置更新 sidenav）会很痛苦页面），最重要的是锚点，以便 sidenav 真正起作用。

我不是那么专业，想知道是否有人知道使用 JS 将 ID 和 class 添加到一系列 headers 中的方法？

我正在考虑为 section-tree-with-article 中的每个 h2 添加一个唯一 ID，以及一个与 h2 的文本相匹配的 class？

有什么想法吗？

Answer 1

您需要 select 所有 h2 元素，遍历它们并在每次迭代时设置 class 和 id。

我简单地将 innerHTML 设置为 class。您可以根据您的用例进行修改。

var headers = document.querySelectorAll("div.section-tree-with-article h2");

headers.forEach(function(header, idx) {
  header.className = header.textContent.replace(/\s/g, "-");      //You can modify this accordingly
  header.id = "uniqueID" + idx;            //And similarily the uniqueID
})

<div class="section-tree-with-article">
  <ul>
    <li class="section">
      <h2>Admin 0</h2>
    </li>
  </ul>
  <ul>
    <li class="section">
      <h2>Admin 1</h2>
    </li>
  </ul>
  <ul>
    <li class="section">
      <h2>Admin 2</h2>
    </li>
  </ul>
  <ul>
    <li class="section">
      <h2>Admin 3 4 5</h2>
    </li>
  </ul>
  <ul>
    <li class="section">
      <h2>Admin 4</h2>
    </li>
  </ul>
</div>

这是 jquery 中的相同解决方案：

$("div.section-tree-with-article h2").each(function(index, value){
    var classToAdd = $(this).text();
    $(this).attr('class', classToAdd);
    $(this).attr('id', "uniqueID" + index);
})

Answer 2

虽然这个答案没有解决您对 JavaScript 解决方案的请求，但我建议改用帮助中心的 built-in 模板系统来迭代元素并直接添加类在 html 文件中。请注意，这仅适用于 "Professional" 和 "Enterprise" Zendesk 计划。

这个例子可能不是最好的，因为你最终会在 h2 元素的 class 属性的值中包含空格或其他不可用的字符（它将替换 {{name}} 和部分的名称），但我希望它能让您了解它是如何工作的，以及您可以如何使用它来实现解决方案。

<div class="section-tree-with-article">
  <ul>
    {{#each sections}}
      <li class="section">
        <h2 class="{{name}}" id="{{id}}">{{name}}</h2>
      </li>
    {{/each}}
  </ul>
</div>

最终会变成这样：

<div class="section-tree-with-article">
  <ul>
    <li class="section">
      <h2 class="Admin and Settings" id="12345">Admin and Settings</h2>
    </li>
    <li class="section">
      <h2 class="Getting Started" id="45678">Getting Started</h2>
    </li>
    ...[more sections]...
  </ul>
</div>

有关帮助中心模板的更多信息，请点击此处： https://support.zendesk.com/hc/en-us/articles/216367358-Help-Center-templating-cookbook-Professional-and-Enterprise-

使用 Javascript 添加 class 和 ID 到 headers

Adding a class and ID to headers using Javascript

javascript

class

zendesk