Question

首先感谢所有在本网站上提供输入的人。它帮助我找到问题的答案。这是我在这里的第一篇文章，希望有人能指导我朝正确的方向发展。

我目前在一个网站上工作并尝试设置一个相当大的手风琴设置（30多个手风琴）。我正在寻找答案，并找到This Page，它提供了很好的信息以及我想要完成的事情减去一件事。

ID是根据＆lt;中显示的文本设置的。 H3＆GT;标签。我有一个相当长的＆lt; H3＆GT;因为我从数据库中提取事件的缩写和描述。（例如：AAM - 服装与配件营销系列）。我可以让这个工作，但ID会像“aam _-_ apparel”......等等。

我需要能够在href =“＃myNameHere”中的＃之后创建ID，这只是缩写。（缩写和描述需要在h3中显示）

<div id="accordion">
<h3><a href="#link1">Link1</a></h3>
<div>content</div>
</div>

如果您将“Link1”更改为“Link1Test”，则会将ID更改为“Link1Test”。

$(function() {
  var $accordion = $("#accordion").accordion({active: false, collapsible: true}),
  hashId = 0;

if (window.location.hash) {
  $accordion.children('h3').each(function(i){
    var txt = $(this).text().toLowerCase().replace(/\s+/g,'_');
    this.id = txt;
    if (txt === window.location.hash.slice(1)) {
      hashId = i;
    }
  });

  $accordion.accordion({
    active: hashId,
    animate: true,
    heightStyle: 'content',
    collapsible: true,
    create: function( event, ui ) {
      $accordion.children('h3').each(function(i){
        $(this).before('<a class="accordion-link link" data-index="' + i + '" href="#' + this.id + '"></a>');
      });
      $accordion.find('.accordion-link').click(function(){
        $accordion.accordion( "option", "active", $(this).data('index') );
      });
    }
});
}
});

感谢所有帮助和欢迎，非常感谢您的时间和知识。

Answer 1

锚点的href属性是根据标题的id属性设置的;这些id是根据第一个txt调用中的.each变量设置的。这就是我们想要编辑的内容，我们可以在预设分隔符上使用.indexOf来提取前几个字符：

  var DELIMITER = '_-_';
  $accordion.children('h3').each(function(i){
    var txt = $(this).text().toLowerCase().replace(/\s+/g,'_');
    txt = txt.slice(0, txt.indexOf(DELIMITER)); // <- extracts Abbreviation
    this.id = txt;
    if (txt === window.location.hash.slice(1)) {
      hashId = i;
    }
  });

这假设您的所有标题都遵循模式＆＃34;缩写 - 描述＆＃34;。如果它是不同的模式，只需更改DELIMITER值即可。（如果你不介意尾随下划线，也可以DELIMITER = "-"

）

现在，如果有多种模式，您可以在多个条件之间拆分.slice调用，或使用正则表达式将它们全部合并：

  var DELIMITERS = ["_-_", "_:_"]; // <- backslash-escape special characters here
  // and then...
    txt = txt.replace(new RegExp("(" + DELIMITERS.join("|")) + ").*"), "");

在描述中拥有DELIMITER的多个实例是安全的，因为.indexOf和正则表达式匹配都将返回第一个实例。由于这是在之前编辑txt值，它实际上在任何地方使用过，它应与其余代码兼容

jQueryUI - Accordion - 从href设置ID

1 个答案: