在散列類中追加所有hrefs

Question

我試圖在所有.drawer-filter-btns>頁面加載中使用URL片段添加錨定標記。該URL片段由前一頁（例如，site.com/foo#bar）中的鏈接確定，我打算在該頁面上生成URL以鏈接到每個產品子集可用的各種顏色類型。

目前我的HTML看起來像這樣：

<div class="drawer-filter-btns"> 
    <a href="_door_type_a_drawer_type_1">link</a> 
    <a href="_door_type_b_drawer_type_1">link</a> 
    <a href="_door_type_a_drawer_type_2">link</a> 
    <a href="_door_type_b_drawer_type_2">link</a> 
    <a href="_door_type_a_drawer_type_3">link</a> 
    <a href="_door_type_b_drawer_type_3">link</a> 
    <a href="_door_type_a_drawer_type_4">link</a> 
    <a href="_door_type_b_drawer_type_4">link</a> 
</div> 

這是很容易的找出只是做一個邏輯：

var href = $(".drawer-filter-btns>a").attr('href'); 
var hash = location.hash.substr(1); 
$(".drawer-filter-btns>a").attr('href', hash + href); 

但是我有這個問題是每個按鈕都有一個不同的href（在執行JS之前），但代碼只考慮第一個並將其複製到.drawer-filter-btns> a的所有hrefs中，所以我的HTML變成了這樣（代碼執行後）：

<div class="drawer-filter-btns"> 
    <a href="bar_door_type_a_drawer_type_1">link</a> 
    <a href="bar_door_type_a_drawer_type_1">link</a> 
    <a href="bar_door_type_a_drawer_type_1">link</a> 
    <a href="bar_door_type_a_drawer_type_1">link</a> 
    <a href="bar_door_type_a_drawer_type_1">link</a> 
    <a href="bar_door_type_a_drawer_type_1">link</a> 
    <a href="bar_door_type_a_drawer_type_1">link</a> 
    <a href="bar_door_type_a_drawer_type_1">link</a> 
</div> 

儘管不熟悉JQuery/Javascript，但我試圖用PHP從我們學到的邏輯來解決這個問題，儘管它沒有像預期的那樣工作。

$('.drawer-filter-btns>a').attr('href').each(function(){ 
    var href = $(".drawer-filter-btns>a").attr('href'); 
    var hash = location.hash.substr(1); 
    $(".drawer-filter-btns>a").attr('href', hash + href); 
}); 

我想要做的是獲取href變量來更新每個鏈接，以便正確地追加它們。可能有一種方法可以做到這一點，而不需要將原始的href設置爲一個變量，但我目前不熟練使用Javascript。

理想的情況下，我最終輸出看起來像這樣：

<div class="drawer-filter-btns"> 
    <a href="bar_door_type_a_drawer_type_1">link</a> 
    <a href="bar_door_type_b_drawer_type_1">link</a> 
    <a href="bar_door_type_a_drawer_type_2">link</a> 
    <a href="bar_door_type_b_drawer_type_2">link</a> 
    <a href="bar_door_type_a_drawer_type_3">link</a> 
    <a href="bar_door_type_b_drawer_type_3">link</a> 
    <a href="bar_door_type_a_drawer_type_4">link</a> 
    <a href="bar_door_type_b_drawer_type_4">link</a> 
</div> 

Answer 1

小提琴：http://jsfiddle.net/hvh9rxbt/

var hash = "bar"; 
$('.drawer-filter-btns>a').each(
    function(){ 
     var href = $(this).attr('href'); 
     $(this).attr('href', hash + href); 
    } 
); 

你要遍歷錨，然後讓每個那些href和通過預先的更新哈希值。你迭代每個href，然後每次選擇每個錨點。

$('.drawer-filter-btns>a').each(此行迭代drawer-filter-btns中的每個錨點。該行var href = $(this).attr('href');在迭代中引用當前錨並獲取它的href。 $(this).attr('href', hash + href);，並且此行再次引用迭代中的當前錨點，並使用通過將散列值預置爲href創建的新值更新其href。

我剛剛添加了一個默認值的哈希變量，以演示小提琴。

正如A.沃爾夫在評論中指出的那樣，因爲attr對集合起作用，所以不需要遍歷每個錨，因爲jQuery會爲你做。

$('.drawer-filter-btns>a').attr('href', function(_, href){ 
     return hash + href; 
}); 

而且通過A. Wollf創建的小提琴：http://jsfiddle.net/hvh9rxbt/1/

以供參考，因爲我其實是不知道的一個函數傳遞給ATTR方法的能力：

http://api.jquery.com/attr/#attr-attributeName-function

酷東西！