Переключить некорректно - PullRequest
Новая
       39

Переключить некорректно

0 голосов
/ 12 июля 2020

Я хочу перечислить подробную информацию о том, что нажимает пользователь, но информация отображается только в первом tr, и значения остаются такими же, даже если я нажал 2-ю или 3-ю кнопку.

домой. jsp

<%@include file="/common/header.jsp" %>
<main>
<form action="" method="post">
    <table border="1">
        <tr>
            <th>r_no</th>
            <th>r_start</th>
            <th>r_end</th>
            <td><input type="button" value="ADD"
                onclick="location.href='insert.do'"></td>
        </tr>
        <c:forEach items="${routelist}" var="list">
            <tr>
                <td>${list.r_no}</td>
                <td>${list.r_start}</td>
                <td>${list.r_end}</td>
                <td><input type="button" value="EDIT"
                    onclick="location.href='update.do?r_no=${list.r_no}'"></td>
                <td><input type="button" value="DELETE"
                    onclick="location.href='delete.do?r_no=${list.r_no}'"></td>
                <td><input type="button" value="DETAILED" class="btn"></td>
            </tr>
            <tr>
                <td colspan="3"><aside>
                    <ul>
                        <li>r_pay_adult : ${list.r_pay_adult}</li>
                        <li>r_pay_teen : ${list.r_pay_teen}</li>
                        <li>r_pay_kid : ${list.r_pay_kid}</li>
                    </ul>
                </aside></td>
            </tr>

        </c:forEach>
    </table>
</form>
<table width="600">

в сторону. js

(function($){
$(function(){

    var $aside = $('aside'),
        $btn = $('.btn');
    
    $aside.hide();
    
    $btn.on('click', function(){
         var e = $(this).index();
        
        $aside.eq(e).toggle(500);
         
         if($(this).val()=="DETAILED")
        {
            $(this).val("CLOSE");
        } else {
            $(this).val("DETAILED");
        }
    });
    
});
})(jQuery);

Подскажите, как это исправить проблема? Спасибо.

1 Ответ

0 голосов
/ 12 июля 2020

Проблема в том, что вы индексируете с помощью $(this).index().

Если в index() не передан аргумент, он вернет индекс элемента внутри его братьев и сестер . У этих кнопок нет братьев и сестер в соответствующем <td>, поэтому он всегда будет возвращать 0

Попробуйте проиндексировать экземпляр кнопки во всей коллекции кнопок: 

var e = $btn.index(this);

Более надежное решение было бы использовать атрибуты данных на кнопках

...