在页面加载后获取传递给元素的数据属性

Question

我在javascript和jquery中相对较新。 我正在尝试创建和自定义<input type="file"> 。 所以，我从视图中隐藏它，而在另一个触发时，客户点击a元素。

所以基本上我的输入看起来像这样

<input type="file" style="display:none;" id="myFile">

而我这样的元素

<a href="#" class="add_image" data-index="0" data-conind="1"><i class="fa fa-picture-o fa-2x" aria-hidden="true"></i> Choose Image</a>

因此，要实现此目标并将数据属性传递给我所做的输入：

//open select of image
    $(document).on('click','.add_image',function(e) {
        e.preventDefault();
        var att = $(this).data();
        $.each(att,function(index,val) {
           $('#myFile').attr(index,val); 
        });
        $('#myFile').trigger('click');
    });

这个想法是在客户选择图像后触发onChange事件以上传图像。 但是我需要数据属性。

$(document).on('change','#myFile',function(e) {
        e.preventDefault();
console.log($(this).data());
});

在这种情况下，我得到的属性为null或未定义

Answer 1

您需要使用.data而不是.attr设置数据属性

 $(document).on('click', '.add_image', function(e) { e.preventDefault(); var att = $(this).data(); $.each(att, function(index, val) { $('#myFile').data(index, val); }); $('#myFile').trigger('click'); }); $(document).on('change', '#myFile', function(e) { e.preventDefault(); console.log($(this).data()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" style="display:none;" id="myFile"> <a href="#" class="add_image" data-index="0" data-conind="1"><i class="fa fa-picture-o fa-2x" aria-hidden="true"></i> Choose Image</a> 

您可能需要在文件弹出窗口中选择一个文件才能查看console.log（因为它仅记录更改）