javascript - 动态附加值到链接会产生错误的结果

Question

我有这个简单的表，其中包含用户详细信息(提供的示例中的用户 ID)。每条记录都有一个可用的链接。该链接(实际上)是根据记录数动态生成的。每条记录都会有一个链接。单击此链接后，必须将相应用户的 ID 传递(附加)到另一个链接(我在示例中将其称为用户链接)。

我的 HTML 代码:

<a id="abc" href="aa/">User Link</a>
<hr>

<table border="1">
<tr>
    <td><a id="xyz" data-userid="100" href="#">first user</a></td>
    <td>100</td>
</tr>

<tr>
    <td><a id="xyz" data-userid="200" href="#">second user</a></td>
    <td>200</td>
</tr> 

<tr>
    <td><a id="xyz" data-userid="300" href="#">third user</a></td>
    <td>300</td>
</tr>     
</table> 

jQuery:

$(document).on('click','#xyz',function(e){
     var uid = $(this).attr('data-userid');
     $('#abc').attr('href',$('#abc').attr('href')+uid);
});

我将根据上述 jQuery 代码将用户 ID 附加到用户链接。

这就是我想要实现的目标:

<a id="abc" href="aa/100">User Link</a>对于第一个用户

<a id="abc" href="aa/200">User Link</a>对于第二个用户

<a id="abc" href="aa/300">User Link</a>对于第三个用户

我得到了部分。

问题:

当我在单击前一个链接后单击第二个链接时，这两个值都会附加到用户链接的末尾。

例如，如果我最初单击第一个用户，则用户链接将变为

<a id="abc" href="aa/100">User Link</a>

然后，如果我单击第二个用户，用户链接将变为

<a id="abc" href="aa/100200">User Link</a> 

等等...这不是我想要得到的。我哪里出错了？？？

FIDDLE .

P.S:使用浏览器中的“检查元素”来查看实时操作中的困惑情况。

Answer 1

几个问题:

• 将 ID 更改为标记 class="xyz" 和 click 处理程序 .xyz 中的类
• 存储初始 href 值，以便在后续点击时访问它。

<小时/>

<强> Updated Fiddle

var initHref = $('#abc').attr('href')
$(document).on('click','.xyz',function(e){
     e.preventDefault();                      // Prevent default action of `<a>`
     var uid = $(this).attr('data-userid');   //or $(this).data('userid');
     $('#abc').attr('href',initHref+uid);
});