Как передать URL-адрес в качестве параметра?

Question

У меня есть динамически сгенерированные теги div. Каждый тег div содержит несколько полей ввода и имеет идентификатор, который является уникальным URL-адресом. Я пытался использовать значение, присутствующее в div, используя кнопку onclick. Я пробовал использовать формы, но не смог передать ссылку в качестве параметра.

<div id="link"> 
    <input fields> 
    <input fields> 
    <button onclick="showInput(link)">Click me</button> 
</div> 

function showInput(id) { 
    alert(id); // alerts "link" and not the actual value 
    var container = document.getElementById(id).value;  
    var value1= container.closest('#field1').val(); 
    var value2= container.closest('#field2').val(); 

    writeLinkScore(id,value1, value2); 
} 

Answer 1

Контейнер представляет собой строку, и вы рассматриваете его как объект JQuery. Это твоя проблема.

var container = document.getElementById(id).value; //String here  
var ddscore = container.closest('#field1').val(); //Act like it is jQuery here 

и дальше вниз в коде

writeLinkScore(id,field1, field2); //where is field1 and field2 defined? 

И вы не проходя строку, вы передаете в объекте

<button onclick="showInput(link)">Click me</button> 

---

<button onclick="showInput('link')">Click me</button> 

и

function showInput(id) { 
    var field1 = $('#field1').val(); 
    var field2 = $('#field2').val(); 
    writeLinkScore(id, field1, field2); 
} 

Answer 2

Если div динамически генерируется, почему бы просто не передать URL-адрес в качестве параметра? Например, если URL является «www.google.com»

Я предполагаю, что вы в настоящее время является:

<div id="www.google.com"> 
    <input fields> 
    <input fields> 
    <button onclick="showInput(www.google.com)">Click me</button> 
</div> 

почему бы не сделать:

<div id="www.google.com"> 
    <input fields> 
    <input fields> 
    <button onclick="showInput('www.google.com')">Click me</button> 
</div> 

Answer 3

Это немного грязный, когда вы используете vanilla JS для выбора элемента DOM, а затем используйте jQuery для перемещения по нему. Вот несколько шагов, которые вы можете сделать для его реорганизации:

1. Не используйте onClick непосредственно в HTML (определенно анти-шаблон). Вместо этого привяжите обработчик события к кнопке в отдельном файле js.
2. Если вы собираетесь использовать JQuery, выберите элемент в JQuery образом, так что вы получите JQuery обернутого объекта полноценных методов траверсов JQuery DOM
3. Если вы передаете уникальный URL для элемента, попробуйте использовать data-* атрибут, а не перейти к id напрямую. Было бы странно, если каждый раз, когда вы захотите получить элемент по id, вам нужно будет ввести длинный URL-адрес.

это пример, вы можете попробовать:

HTML

<div id="link1" class="linkDiv" data-link="/your/url/slug"> 
    <input id="field1"> 
    <input id="field2"> 
    <button class="linkBtn">Click me</button> 
</div> 

JS

$(function() {  
    $('.linkBtn').on('click', function() { 
    var $this = $(this); 
    var link = $this.closest('.linkDiv').data('link'); 
    var field1 = $this.siblings('#field1').val(); 
    var field2 = $this.siblings('#field2').val();  

    writeLinkScore(link, field1, field2); 
    }); 

    function writeLinkScore() { 
    // your write function 
    } 
});