切换未正确显示

Question

我想列出用户点击的详细信息，但信息只显示在第一个 tr 中，即使我点击第二个或第三个按钮，值也相同。

home.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">

aside.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);

你能告诉我如何解决这个问题吗？谢谢

Answer 1

问题是您使用 $(this).index() 建立索引的内容。

当没有参数传递给 index() 时，它将 return 元素 在其兄弟 中的索引。这些按钮在它们各自的 <td> 中没有兄弟姐妹，所以它总是 return 0

尝试在整个按钮集合中索引按钮实例：

var e = $btn.index(this);

更可靠的解决方案是在按钮上使用数据属性

切换未正确显示

Toggle not showing correctly

jquery

jsp

toggle