javascript - 在对象内引用 DOM

Question

我有一个表，其中每行包含一些数据( data-id )和 <div class = "upload">Upload</div> 。上传者需要传递一个包含uploader_obj.button的对象设置为起始<div> 、任何要发送到服务器的参数(例如 data-id)，以及我没有显示的其他一些内容。

以下脚本循环遍历表格，修改对象以设置按钮和params.id，并在每一行上创建 uploader 。

虽然每行都创建了一个单独的上传按钮，但它们都引用相同的 params.id，该 params.id 设置为最后一行的值(即 222)。我需要将每个设置为其特定行的值。

解决这个问题的一种方法是让每个上传者都有自己的 upload_obj，但这似乎浪费内存。

相反，我尝试在 uploader_obj 中引用 data-id。我可以在 onSubmit 中这样做，但是，还没有弄清楚如何使用这个值来设置 param.id。我尝试通过执行类似 params: {'id':$(this.button).parent().parent().data('id')} 的操作在 param 中设置它但这是我的文档，而不是上传者。

那么...如果不为每一行创建单独的 uploader_obj，我怎样才能使每一行的 uploader 将其自己的 param.id 发送到服务器？谢谢

PS。抱歉，标题太弱了。我确实尝试过想出一个更好的方案，但没有想到。

<table>
    <tr data-id="123"><td>Hello</td><td><div class="upload">Upload</div></td></tr>
    <tr data-id="321"><td>Hello</td><td><div class="upload">Upload</div></td></tr>
    <tr data-id="222"><td>Hello</td><td><div class="upload">Upload</div></td></tr>
</table>

var uploader_obj = {
  button:null,
  params: {'id':null},
  onSubmit: function(id, fileName) {
     var id=$(this.button).parent().parent().data('id')
     console.log(id);
  },
  otherStuff: whatever
};


$('#myTable div.upload').each(function(i,v){
    uploader_obj.button=this;
    uploader_obj.params.id=$(this).parent().parent().data('id');
    new qq.FileUploaderBasic(uploader_obj);
});

Answer 1

您在每次迭代中传递相同的对象，只需根据循环内的值创建对象即可:

$('#myTable div.upload').each(function(i,ele){
    new qq.FileUploaderBasic({
        button: ele,
        params: {
            id: $(ele).closest('tr').data('id')
        },
        onSubmit: function(id, fileName) {
            var id=$(this).closest('tr').data('id')
        },
        otherStuff: whatever
    });
});