Question

我有这个包含用户详细信息的简单表（在提供的示例中为用户ID）。每个记录都有一个链接。此链接（实际）是基于no.of记录动态生成的。每条记录都有一个链接。点击此链接后，必须将相应用户的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 ：使用浏览器中的Inspect Element查看实时操作中的这个混乱。

Answer 1

首先，不要有多个具有相同ID的元素。参见

Why is it a bad thing to have multiple HTML elements with the same id attribute?

其次，将初始href存储在var

中

var initialHref = $('#abc').attr('href');

并更改

$('#abc').attr('href',$('#abc').attr('href')+uid);

到

$('#abc').attr('href',initialHref+uid);

看到它正常工作here

Answer 2

几个问题：

将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);
});

Answer 3

您可能希望存储用户链接的href并稍后使用它来附加新值，如下所示。

P.S。请将 ID xyz更改为课程

演示@ Fiddle

$(function() {
    var userLink = $('#abc')[0];
    var linkHref = userLink.href;

    $(document).on('click','.xyz',function(e) {
        e.preventDefault(); //Cancels the default behaviour
        var uid = $(this).attr('data-userid');
        userLink.href = linkHref + uid;
    });
})

Answer 4

与您使用revents的方式相同，您可以在第一个链接中使用data-userid来存储您的初始和未修改的网址。

然后使用类似的东西：

data-href

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

4 个答案: