использование getElementsByClassName в for_loop не работает должным образом - PullRequest
Новая
       9

использование getElementsByClassName в for_loop не работает должным образом

0 голосов
/ 31 октября 2018

В моем коде laravel есть цикл @foreach, в каждой итерации он показывает таблицу. Я хочу сделать кнопку, чтобы показать или скрыть таблицу для каждого. Я использую getElementsByClassName, чтобы изменить идентификатор тега таблицы для каждой таблицы итерации, но он работает только для первой таблицы. Вот мой код: 

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

Случайно нашел -3 для первого значения cc. Я знаю идею, почему она не работает. Я работаю над этим в течение 2 дней, но это не работает.
Любая идея?

1 Ответ

0 голосов
/ 31 октября 2018

вот решение, которое не требует цикла на <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>
...