我想通过在项目中单击按钮来更改项目中的样式，但是当我单击按钮时，只有 forech 中的第一个项目会发生变化答案

【问题标题】：I want to change the style in a item with a button click in the item, but when i click the button only the first item in the forech changes我想通过在项目中单击按钮来更改项目中的样式，但是当我单击按钮时，只有 forech 中的第一个项目会发生变化
【发布时间】：2022-09-30 21:33:43
【问题描述】：

我从网站调用了一个 api 来制作我自己网站中的项目列表。

我用foreach 做到这一点。该列表已正确导入，但我有一个小问题。

列表中的每个项目都有一个带有display: none; 的描述，每个项目还有一个按钮。如果我单击该按钮，我想制作display: inline;

我尝试了很多东西，但每次单击按钮时，只有 foreach 列表中的第一项发生变化。

我不是很擅长解释，但希望有人可以帮助我。

        <?php
        foreach ($items as $item):
            echo \"<script> 
            
            function hide_post(){
                hideshow = document.querySelector(\'#showMoreLessId\');
                hideshowtext = document.querySelector(\'#showMoreLess\');
                if (hideshow.style.display == \'inline\'){
                    hideshow.style.display = \'none\';
                    hideshowtext.innerHTML = \'Toon meer\';
                }else{
                    hideshow.style.display = \'inline\';
                    hideshowtext.innerHTML = \'Toon minder\';
                }
            }
            </script>\";
        ?>
            <div class=\"item\" id=\"item\">
                <h4>Versie: <?= $item->name;  ?></h4>
                <div id=\"showMoreLessId\">
                    <p>Issues in versie: <?= $res->issuesFixedCount; ?> </p>
                    <p>Afgeronde issues: <?= $roundedIssue;?> </p>
                    <p>Nog te verwerken issues: <?= $uns->issuesUnresolvedCount;?> </p>
                </div>
                <small><?= $item->releaseDate; ?></small>
                <a onclick=\"hide_post()\" id=\"showMoreLess\">Toon meer</a>
                <a>|</a>
                <a href=\"<?=\'version/?version=\' . $item->name; ?>\">Meer info</a>
            </div>
            <?php
        endforeach;?>
    </div>
</div>

document.querySelector(\'#showMoreLessId\'); 只会得到第一个

标签： javascript

【解决方案1】：

原因是document.querySelector('#showMoreLessId');只会得到第一个

我建议您为每个元素分配一个唯一标识符（例如使用_<?= $item->name; ?>）

<?php
        foreach ($items as $item):
            echo "<script> 
            
            function hide_post(){
                hideshow = document.querySelector('#showMoreLessId_'<?= $item->name;  ?>);
                hideshowtext = document.querySelector('#showMoreLess_'<?= $item->name;  ?>);
                if (hideshow.style.display == 'inline'){
                    hideshow.style.display = 'none';
                    hideshowtext.innerHTML = 'Toon meer';
                }else{
                    hideshow.style.display = 'inline';
                    hideshowtext.innerHTML = 'Toon minder';
                }
            }
            </script>";
        ?>
            <div class="item" id="item">
                <h4>Versie: <?= $item->name;  ?></h4>
                <div id="showMoreLessId_<?= $item->name;  ?>">
                    <p>Issues in versie: <?= $res->issuesFixedCount; ?> </p>
                    <p>Afgeronde issues: <?= $roundedIssue;?> </p>
                    <p>Nog te verwerken issues: <?= $uns->issuesUnresolvedCount;?> </p>
                </div>
                <small><?= $item->releaseDate; ?></small>
                <a onclick="hide_post()" id="showMoreLess_"_<?= $item->name;  ?>>Toon meer</a>
                <a>|</a>
                <a href="<?='version/?version=' . $item->name; ?>">Meer info</a>
            </div>
            <?php
        endforeach;?>
    </div>
</div>

【讨论】：