HTML each遍历展示并在js中获取值的方式

html:

<div class="row">
    <div class="col-sm-12">
        <div class="form-group">
            <div class="col-xs-12" th:each="FileInfo: ${FileInfoList}">
                <div class="col-xs-8">
                    <input name="fileName" th:value="${FileInfo.fileName}" class="form-control" type="text"
                           readonly>
                </div>
                <div class="col-xs-2">
                    <span class="input-group-addon"><i class="fa fa-download" th:data-filename1="${FileInfo.fileName}" onclick="downloadFile(this)"></i></span>
                </div>
                <div class="col-xs-2">
                    <span class="input-group-addon"><i class="fa fa-remove" th:data-filename2="${FileInfo.fileName}" onclick="removeFile(this)"></i></span>
                </div>

                
            </div>
        </div>
    </div>
</div>

js:

 function downloadFile(_this) {
        var fileName = $(_this).data('filename1')
        var fileCode = document.getElementById("fileCode").value;//附件编号
        window.location.href = prefix + "/downloadFile/" + fileName + "/" + fileCode;
    }

    function removeFile(_this) {
        var fileName = $(_this).data('filename2')
        var fileCode = document.getElementById("fileCode").value;//附件编号
        // window.location.href = prefix + "/removeFile/" + fileName + "/" + fileCode;
        onchange(fileCode, fileName);
    }

function onchange(fileCode, fileName) {
        $.modal.confirm("正在删除附件信息，请确认是否执行", function () {
            $.ajax({
                cache: false,
                type: "GET",
                url: prefix + "/removeFile/" + fileName + "/" + fileCode,
                data: {},
                async: false,
                error: function (request) {
                    $.modal.alertError("系统错误");
                },
                success: function (data) {
                    // $.modal.alertWarning("操作成功");
                    location.reload()
                }
            });
        });
    };

说明：

1 遇到的难题是i标签a标签与input标签值传递的问题，使用onclick()传值，this对象仅能获取本标签的属性，在已定义的属性中，不能获取到同一dev下input的值，所以使用自定义标签，写法：data-xxxx，js中可以根据this别名取值，$(this).data('xxxx')。

JQuery可以使用自定义属性，

th:data-filename1 
与
var fileName = $(_this).data('filename1')

2 可以用于单独下载每个附件，或作为唯一标识进行操作处理，下载，删除，修改等事件

 

学习是最公平的事！