javascript - 从javascript中的动态按钮显示值

Question

我正在尝试从循环中生成一系列按钮。在每个按钮单击时，它应该显示每个按钮的 file.path。 id 是从循环本身动态分配的。它只显示第一个。这是代码:

单击按钮时，它会显示 doc 1 的路径。但是当单击第二个按钮时，它也会显示 doc1 的路径。它应该显示doc 2的路径

var result = {"data":"{\"files\":[{\"name\":\"doc1.pdf\",\"title\":\"networking\",\"path\":\"mfpreader.comze.com\\\/files\\\/doc1.pdf\"},{\"name\":\"doc2.pdf\",\"title\":\"Armoogum\",\"path\":\"mfpreader.comze.com\\\/files\\\/doc2.pdf\"}]}","isSuccessful":true};
 var str= '';
 var files = JSON.parse(result.data).files;

                    for(var file, i = 0; i < files.length; i++) {
                      file = files[i];

                      str += file.name + '<br />' + file.title + '<br/>' + '<input type="hidden" id="b" value="'+ file.path +'" />' + '<button onclick="add()">Add</button> '+  '<br/>' ;
                    }

                    alert(str);                                  
                    $("#viewlist").html(str);  
       function add() {

        var b = document.getElementById('b').value;

        alert(b);
      }    

如果能得到一些帮助，我将不胜感激。谢谢。

Answer 1

您所有的按钮都具有相同的 ID，这是行不通的。有几种方法可以做到这一点。我稍微修改了您的 HTML 以对每个部分进行分组，以便您可以轻松找到按钮的关联隐藏字段。我还将对单击按钮的引用传递给添加函数:

var result = {"data":"{\"files\":[{\"name\":\"doc1.pdf\",\"title\":\"networking\",\"path\":\"mfpreader.comze.com\\\/files\\\/doc1.pdf\"},{\"name\":\"doc2.pdf\",\"title\":\"Armoogum\",\"path\":\"mfpreader.comze.com\\\/files\\\/doc2.pdf\"}]}","isSuccessful":true};
var str= '';
var files = JSON.parse(result.data).files;

for (var i = 0; i < files.length; i++) {
  var file = files[i];
  str += file.name + '<br /><div class="fileSection">' + file.title + '<br/>' + '<input class="fileName" type="hidden" id="b" value="'+ file.path +'" />' + '<button onclick="add(this)">Add</button> '+  '</div><br/>' ;

  $("#viewlist").html(str);  

function add(btn) { 
  var b = $(btn).closest('.fileSection').find('.fileName').val();
  alert(b)
}