首页 > 解决方案 > 按钮隐藏在 JQuery 中无法按预期工作

问题描述

现在它隐藏和取消隐藏表中的所有行。我只想显示选择的文件。有人可以阐明这里缺少的东西吗?我尝试了多种方法,但它仍然让我头疼。

<script type="text/javascript">

    $(document).ready(function () {
        $('input[id^="rvw-"]').change(
                function(){
                    if ($(this).val()) {
                        alert("(this).val():"+$(this).val());
                        alert("input id:"+ $('input[id^="rvw-"]').val());
                        $('input[id^="rvw-"]').attr('hidden',false); 
                    } 
                }
          );
    });

</script>

<table id="reviewList" class="table table-striped table-condensed dt-responsive basic-table" cellspacing="0">
    <thead>
        <tr>
            <th class="text-center">Series</th>
            <th class="text-center">Series Order</th>
            <th class="text-center">Document Name</th>
            <th class="text-center">Actions</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach items="${reviewDocList}" var="row">
            <tr>
                <td>${row.series}</td>
                <td>${row.seriesOrder}</td>
                <td>${row.documentName}</td>
                <td>
                    <form class="letter" docId="${row.id}" action='<c:url value="/letter-download.htm?docId=${row.id}"/>' method="POST" enctype="multipart/form-data">
                        <input type="hidden" name="docId" value="${row.id}"/>
                        <label class="hidden" for="rvw-${row.id}">Choose file for ${row.documentName}</label>
                        <input type="file" name="doc" id="rvw-${row.id}" title="Choose File for ${row.documentName}"/>
                        <input type="submit"  id="rvw-${row.id}" value="Upload ${row.documentName}" hidden="true"/>
                    </form>
                </td>
            </tr>
        </c:forEach>
    </tbody>
</table>

标签: jqueryhtmlcssbuttoninput

解决方案


问题来自以下行中的选择器:

$('input[id^="rvw-"]').attr('hidden',false); 

当前选择器input[id^="rvw-"]将针对所有以id开头的输入rvw-

您需要使用$(this)来引用更改后的文件输入,例如:

$(this).attr('hidden', false); 

推荐阅读