add an incrementing number to id with php

Question

I am making a portfolio site with kirby cms. my site is a single page website. I want to add an incrementing number after id by using foreach in the part shown in the code below..! Is there easy way to do..? regards,

<?php foreach ($pages->listed() as $p): ?>
    <div class="slideshow">
        <div class="slideshow-box">
            <div class="slideshow-holder">
                <?php foreach ($p->images() as $workimage): ?>
                    <div class="slide">
                        <?= $workimage ?><br><br>
                    </div>
                <?php endforeach ?>
            </div>
            <div class="tooltip">
                <p id="myText<here>"><?= $p->worktitle() ?></p>
            </div>
            <div class="toolbox" id="myDIV<here>">
                <?= $p->description() ?>
            </div>
        </div>

        <div class="actions">
            <span>1/3</span>
        </div>

        <a href="#" class="prev">←</a>
        <a href="#" class="next">→</a>
    </div>
<?php endforeach ?>

<script>
    var button<here> = document.getElementById('myText<here>');
    var div<here> = document.getElementById('myDIV<here>');

    div<here>.style.display = 'none';

    button<here>.onclick = function () {
        if (div<here>.style.display !== 'none') {
            div<here>.style.display = 'none';
        } else {
            div<here>.style.display = 'block';
        }
    };
</script>

This code works currently? You have unentitiezed characters all over that place. `var button =` this must be throwing errors. — user3783243, Oct 23 '22 at 21:44

score 0 · Answer 1 · answered Feb 14 '23 at 11:15

I know I am late to the party, but here is my version.

You can actually just set a $counter Variable before the foreach() and just count it up right before the end of the foreach.

Furthermore I would you data-attributes and query them instead of an id. Here's my Code. I tested it and it worked fine. If there are any questions let me now.

<?php $counter = 1;
foreach ($pages->listed() as $p): ?>
    <div class="slideshow">
        <div class="slideshow-box">
            <div class="slideshow-holder">
                <?php foreach ($p->images() as $workimage): ?>
                    <div class="slide">
                        <?= $workimage ?><br><br>
                    </div>
                <?php endforeach ?>
            </div>
            <div class="tooltip">
                <p data-tooltip="<?= $counter ?>"><?= $p ?></p>
            </div>
            <div class="toolbox" data-toolbox="<?= $counter ?>" style="display: none;">
                <?= $p ?>
            </div>
        </div>
    </div>
    <?php $counter++; endforeach ?>

<script>

    const TOOLTIPS = document.querySelectorAll('[data-tooltip]');

    TOOLTIPS.forEach(TOOLTIP => {
        TOOLTIP.addEventListener('click', () => {
            const TOOLBOX = document.querySelector(`[data-toolbox="${TOOLTIP.dataset.tooltip}"]`);

            if (TOOLBOX) {
                if (TOOLBOX.style.display !== 'none') {
                    TOOLBOX.style.display = 'none';
                } else {
                    TOOLBOX.style.display = 'block';
                }
            }
        });
    });

</script>

add an incrementing number to id with php

1 Answers1