jQueryUI - Accordion - 從href中設置ID

首先感謝您爲本網站提供輸入的所有內容。它幫助我極大地找到問題的答案。這是我在這裏的第一篇文章，希望有人能指導我正確的方向。jQueryUI - Accordion - 從href中設置ID

我在當前的網站上工作，並試圖設置一個相當大的手風琴設置（30 +手風琴）。我正在尋找答案，並找到This Page它提供了很好的信息和我想要完成的東西減一件事。

該標識設置爲顯示在< h3>標籤中的文本。我有一個相當長的時間，因爲我正在從數據庫中提取事件的縮寫和描述。（例如：AAM - 服裝&配件營銷系列）。我可以得到這個工作，但ID會像「aam _-_ apparel」等等。

我需要能夠創建ID爲什麼後面的＃在一個href =「＃myNameHere」這將是僅縮寫。（縮寫&說明需要在H3顯示）

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

如果你改變了「鏈接1」說「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')); 
     }); 
    } 
}); 
} 
});

謝謝所有的幫助和鐘聲，你的時間和知識是極大的讚賞。

來源

2014-09-05 TenfoldSystems

錨的href屬性正在設置從頭的id屬性;這些id正在從第一個.each調用中的txt變量中設置。因此，這就是我們要修改，我們可以使用.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; 
    } 
    });

這是假設所有的標題遵循的模式「的縮寫 - 說明」。如果它是不同的模式，只需更改DELIMITER的值。（也可以只DELIMITER = "-"，如果你不介意的結尾下劃線）現在

，如果有多個模式，您可以拆分.slice通話要麼跨越多個條件，或使用正則表達式來他們都結合起來：

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

它是安全的，具有說明書的DELIMITER的多個實例，因爲這兩個.indexOf和正則表達式匹配將返回第一個實例。由於這是在之前編輯值它實際上在任何地方使用，它應該與您的代碼的其餘部分兼容

來源

2014-09-05 09:02:09 blgt

非常感謝，這正是我所尋找的。 – TenfoldSystems 2014-09-05 16:00:12

jQueryUI - Accordion - 從href中設置ID

回答

相關問題