Question

所以我在java spring中使用for循环创建了一个表，我想在单击一个按钮时打开和关闭它的一部分，所以超简化版看起来像这样

<jsp:attribute name= "scripts">
       <script type="text/javascript">
        function togglet(){
            $('.wantTotoggleThis').toggle();
            $('.iWantToReplaceItWithThis').toggle();
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.iWantToReplaceItWithThis').hide();
        })
    </script>
</jsp:attribute>
<table>
<tbody>
    <c:foreach var = "whatever" items = "$list">
    <td class = "wantTotoggleThis"> Hello </td>
    <td class = "iWantToReplaceItWithThis"> Replaced </td>
    <a href="#" onclick="toggle()" >
</tbody>
</table>

我现在切换它们的方式是我只使用切换功能，但回过头来看，表中条目中的每一个都被切换。我只想切换单击按钮的行。

Answer 1

将元素传递给onclick，以便您可以从该元素遍历

<a href="#" onclick="toggle(this)" >

JS

function togglet(el){
    $(el).siblings('.wantTotoggleThis, .iWantToReplaceItWithThis').toggle();            
 }

请注意，使用onclick是一种过时的做法，最好使用现代不显眼的事件监听器。

由于切换单个单元格，也会遇到时髦的表格布局。更改visibility可能是更好的方法

Answer 2

如果其他人对使用函数

感兴趣，我还发现了另一种方法

function toggleSomething(element){
  var row = $(element).closest.('tr');
  row.find('.iwantTotoggleThis').toggle();
  row.find('.iWantToReplaceItWithThis').toggle();
 }

使用JQuery / Javascrpit动态更改表行

2 个答案: