Javascript添加到新ID的ID和散列鏈接

幾個月前我「學習」了JavaScript，但很快就拿起了Python並花費了過去幾個月用該語言編寫程序，所以我決定回去是個好主意實際上學習 JavaScript。現在我正在製作一個非常簡單的「博客」，其中帶有JS的帖子，從帖子生成哈希鏈接，並創建一個最近的帖子部分，您可以點擊鏈接跳轉到帖子這一頁。Javascript添加到新ID的ID和散列鏈接

例如，假設該職位之一的格式是這樣的：

<h2 class="post">Another post for you</h2> 
<h4>I know you love these</h4>

具有多個樁，並在底部一個空的容器，其將用於追加最近的帖子鏈接：

<div id="get-post"></div>

我的JS代碼基本上抓取每個標題與post類，並從元素的標題（刪除空格和逗號）創建一個哈希鏈接。然後創建並附加由帖子標題組成的文本節點，然後將整個鏈接附加到get-post容器中。

var postList = $('#get-post'); 
var post = $('.post'); 

function generateRecentPosts() { 
    post.each(function() { 
     // Create link from post title that will be used to 
     // access that post. 
     var postLink = document.createElement('a'); 
     // Create text node from post title that will be appended 
     // to the postLink. 
     var text = document.createTextNode($(this).html()); 

     // Add elements to the DOM. 
     postLink.href = createLocalLink($(this)); 
     postLink.appendChild(text); 
     postList.append(postLink); 
     postList.append('<br />'); 
    }); 
} 

function createLocalLink(elm) { 
    // Creates the href link that will be used to go to a blog post. 
    // For example, if the title of the elm parameter is "My Post", 
    // a link is created called #My-Post that will be used to access 
    // that post. 
    elm.id = elm.html().replace(/,/g, '').replace(/\s/g, '-'); 
    console.log(elm.id); // Make sure the ID is added. 
    return '#' + elm.id; 
} 

generateRecentPosts();

我的問題是，它生成的鏈接不指向爲每個標題創建的ID。當我點擊鏈接時，我可以看到它成功創建了href散列表#My-Post並將其添加到了定位標記，但它不會將我帶到帖子標題中。

例子：http://jsfiddle.net/samrap/GQtxL/

我甚至增加了一個控制檯日誌功能，以確保被添加到標題的ID，因爲我認爲這是問題，但不是因爲控制檯打印正確的新ID。我真的可以用一些幫助來找出問題出在哪裏。

來源

2013-12-13 samrap

請發佈一個附加的帖子和它的相應鏈接的例子，你也許應該使用'text（）'而不是'html（）'來生成id避免可能插入特殊字符 –

用text（）函數添加了jsfiddle示例 – samrap

您的h2標籤需要有一個id或name屬性與鏈接相對應，這就是內部鏈接的工作原理。 id沒有被添加，因爲你正在訪問一個jQuery對象，就好像它是一個DOM節點（elm.id = ...）。修改您的createLocalLink功能使用jQuery的attr方法設置id屬性：

elm.attr('id', elm.html().replace(/,/g, '').replace(/\s/g, '-'));

此外，由於您有jQuery的可用你可以消減你的代碼到：

var $this = $(this), 
    link = createLocalLink($this); 

var $postLink = $('a', { 
    text: $this.text(), 
    href: link 
}) 

postList.append($postLink).append('<br />');

這裏是你的小提琴更新： http://jsfiddle.net/GQtxL/1/

來源

2013-12-13 05:59:11

這就是我認爲我在'createLocalLink（）'這一行所做的事情：'elm.id = elm.html（）。replace（/，/ g ，''）.replace（/ \ s/g，' - '）;'？ – samrap

看到問題，更新了我的答案。你正在使用'.id'，應該是'attr（'id'，...）' –

感謝你的理解，並且我讀到使用jq創建元素的速度較慢，它有什麼區別？ – samrap

這是因爲您的鏈接使用href =「＃My-Post」，但沒有帖子的ID爲「My-Post」。它只有一個「職位」類。

發生這種情況是因爲傳遞給createLocalLink（）函數的參數是DOM節點。但通過執行elm.id，您不會更改DOM屬性，但會將另一個屬性添加到「elm」對象。因此，您的「榆樹」對象是

x.fn.x.init[1] 
0: h2.post 
context: h2.post 
id: "Another-post-for-you" 
length: 1 
__proto__: Object[0]

因此，實際的帖子永遠不會獲得屬性ID只有「ELM」對象得到它。請注意下面的空ID屬性

draggable: false 
firstChild: text 
firstElementChild: null 
hidden: false 
id: "" 
innerHTML: "Another post for you" 
innerText: "Another post for you"

因此，您的文檔沒有ID爲「My-Post」的元素。您可以查看HTML的來源以驗證這一點。

對於內部鏈接的工作，應該有一個與鏈接的href屬性中使用的ID相同的元素。

例如

<div id="post1"> 
Your Post Here 
</div> 

<!--just to show the effect of moving to the post--> 
<div style="clear:both; height:900px"></div> 

<a href = "#post1">Click Here</a>

這工作，因爲有id爲「POST1」的元素和鏈接使用HREF「＃POST1」它鏈接到相應的元素。因此，也可以將相應的ID添加到您的帖子中（鏈接除外）以使其生效。

來源

2013-12-13 06:02:33

這就是我以前在這行createLocalLink（）所做的事情：'elm.id = elm.html（） .replace（/，/ g，''）.replace（/ \ s/g，' - '）;'？ – samrap

在函數createLocalLink中，您使用elm作爲dom節點的參數，但實際上將jQuery包裝的對象傳遞給它，它沒有id屬性。爲了得到它的工作，請使用elm.get(0).id = ...或elm.attr('id', elm.text().replace(/,/g, '').replace(/\s/g, '-'););

來源

2013-12-13 06:09:22 berrunder

Javascript添加到新ID的ID和散列鏈接

回答

相關問題