Кнопка скрытия не работает должным образом в JQuery

Question

Прямо сейчас скрыть и показать все строки в таблице.Я хочу, чтобы только выбранный файл должен быть показан.Кто-то может пролить свет на то, что здесь не хватает?Я пробовал несколько способов, но это ломало мне голову.

<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>

Answer 1

Рассматривали ли вы вместо этого document.querySelector?Вам больше не понадобится JQuery с element.classList.toggle('classname')

Просто мысль.Вы также можете использовать Babel , чтобы затем преобразовать его в ES5, если вам нужно.

Answer 2

Проблема исходит от селектора в следующей строке:

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

Текущий селектор input[id^="rvw-"] будет нацелен на все входы, которые имеют id, начиная с rvw-.

Вам нужно использовать $(this) для ссылки на измененный файл, например:

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