在 for_loop 中使用 getElementsByClassName 无法正常工作

Question

我的 laravel 代码中有一个 @foreach 循环，在每次迭代中它显示一个 table。我想为每个按钮制作一个显示或隐藏 table 的按钮。我正在使用 getElementsByClassName 为每个 table 迭代更改 table 标记的 ID，但它仅适用于第一个 table。这是我的代码：

<script>
    var cc = -3;
</script>
    @foreach($last as $t)

        <script>
            $(document).ready(function(){
                cc = cc +1;
                document.getElementsByClassName("table")[cc].setAttribute("id",cc);
                $("#hide").click(function(){
                    $("#"+cc).hide();
                });
                $("#show").click(function(){
                    $("#"+cc).show();
                });
            });
        </script>

        <p>If you click on the "Hide" button, table will desapear.</p>

        <button id ="hide">Hide</button>
            <button id ="show">Show</button>

<table class="table">
......

我偶然发现 cc 第一个值是 -3。我知道为什么它不起作用。我正在研究它 2 天，但它不起作用。
有什么想法吗？

Answer 1

这是一个不需要在 <script> 上循环的解决方案。

@foreach($last as $t)

    <p>If you click on the "Hide" button, table will desapear.</p>

    <button class="hide-button">Hide</button>
    <button class="show-button">Show</button>

    <table class="table">
......
<script>
    $(".hide-button").click(function(){
        $(this).next().next().hide();
    });
    $(".show-button").click(function(){
        $(this).next().show();
    });
</script>

如果按钮与 <div> 中的 table 组合在一起（例如）

，则定位到右侧 table 会更容易

@foreach($last as $t)

    <p>If you click on the "Hide" button, table will desapear.</p>
    <div>
        <button class="hide-button">Hide</button>
        <button class="show-button">Show</button>

        <table class="table">
    ......
    </div>
@endforeach
<script>
    $(".hide-button").click(function(){
        $(this).parent('div').find('table.table').hide();
    });
    $(".show-button").click(function(){
        $(this).parent('div').find('table.table').show();
    });
</script>

在 for_loop 中使用 getElementsByClassName 无法正常工作

using getElementsByClassName in for_loop does not work proprly

html

javascript

foreach

getelementsbyclassname

laravel