Question

我有动态生成的div标签。每个div标记包含几个输入字段，其id为唯一的URL。我试图通过使用按钮onclick来使用div中的值。我尝试使用表单，但无法将链接作为参数传递。

<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

Container是一个字符串，您将其视为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

当您使用vanilla JS选择DOM元素然后使用jQuery遍历它时，这有点麻烦。您可以采取以下三个步骤来重构它：

不要直接在HTML中使用onClick（绝对是反模式）。将事件处理程序绑定到单独的js文件中的按钮。
如果您打算使用jQuery，请以jQuery方式选择元素，这样您就可以获得一个带有完整成熟的jQuery DOM遍历方法的jQuery包装对象
如果要将唯一网址传递给元素，请尝试使用data-*属性，而不是直接传递给ID。如果你每次想要通过id获取元素，那就很奇怪了，你必须输入一个长网址。

这是您可以尝试的示例：

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

Answer 3

如果动态生成div，为什么不直接将url作为参数传递？例如，如果网址是＆＃34; www.google.com＆＃34;

我假设你现在拥有的是：

<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>

如何将URL作为参数传递？

3 个答案: