Question

我正在尝试将hrefs附加到所有.drawer-filter-btns＆gt;一个带有页面加载的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＆gt; 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(此行迭代抽屉过滤器btns中的每个锚点。此行var href = $(this).attr('href');使用此行引用迭代中的当前锚点并获取其href。 $(this).attr('href', hash + href);并且此行再次引用迭代中的当前锚点，并通过将哈希值预先添加到href来使用我们创建的新值更新其href。

我刚刚添加了一个带有默认值的哈希变量，以便在小提琴中进行演示。

正如A. Wollf的评论中所指出的那样，因为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

很酷的东西！

使用哈希在类中追加所有href

1 个答案: