Question

我的laravel代码中有一个@foreach循环，在每次迭代中它都显示一个表。我要创建一个按钮以显示或隐藏每个表。我正在使用getElementsByClassName更改每个迭代表的表标签ID，但它仅适用于第一个表。这是我的代码：

<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>中的表格归为一组，那么定位正确的表格会更容易（例如）

@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不能正常工作

1 个答案: