Динамическое добавление значения к ссылке приводит к неправильным результатам

Question

У меня есть эта простая таблица, содержащая пользовательские данные (идентификатор пользователя в приведенном примере). Для каждой записи есть ссылка. Эта ссылка (в реале) динамически генерируется на основании записей. каждая запись будет иметь ссылку. И, щелкнув по этой ссылке, соответствующий идентификатор пользователя должен быть передан (добавлен) в другую ссылку (которую я называю ссылкой пользователя в примере).

Мой 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); 
}); 

Я прилагая идентификатор пользователя к пользователю Link на основе выше JQuery кода.

Это то, что я пытаюсь достичь:

<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> для третьего пользователя

который я частично.

Выпуск:

Когда я нажимаю вторую после нажатия на ссылку на предыдущий, оба значения, добавляя к концу User Link.

Например, если я нажимаю первый пользователь первоначально, пользователь Link становится

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

, а затем, если я нажму второго пользователя, User Link становится

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

и так далее ... что не то, что я пытаюсь получить. Где я ошибся ???

FIDDLE.

P.S: используйте Inspect Element из браузера, чтобы увидеть этот беспорядок в режиме реального времени.

Answer 1

Прежде всего, не имеют нескольких элементов с одинаковым идентификатором.См

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

Во-вторых, сохранить первоначальный HREF в вар как

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

и изменить

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

в

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

Смотреть это работает here

Answer 2

id должен быть уникальным на странице. Если у вас нет контроля над идентификаторами:

$(document).on('click', '[data-userid]', function(e) { 
    var uid = $(this).data('userid'); // Get userid data 
    if (uid) // If present 
     $(this).attr('href', $(this).attr('href') + uid); // Update link address 
    $(this).removeAttr('data-userid'); // Remove data attribute, so it will not append again 
}); 

Демо: https://jsfiddle.net/tusharj/5uhdjd1c/3/

Answer 3

несколько вопросов:

• Изменение идентификаторов классов в разметке 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 4

Вы можете хранить HREF в ссылке пользователя и использовать его в дальнейшем, чтобы добавить новое значение, как показано ниже.

P.S. измените ID xyz к классу

Demo @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 5

Тот же, как вы использовали data-userid, вы можете использовать data-href в первой ссылке, чтобы сохранить свой первоначальный и неизмененный URL.

И затем использовать что-то похожее на:

$(function() { 
    $(document).on("click", ".xyz", function (e) { 
     e.preventDefault(); 

     var userLink = $("#abc"); 
     userLink.attr("href", userLink.attr("data-href") + $(this).attr("data-userid")); 
    }); 
});