javascript - 网站上仅切换一个“显示更多/显示更少”按钮，并具有多个具有相同 ID 的按钮

Question

当我单击“显示更多”按钮时，会显示更多图库图像，并且“显示更多”更改为“显示更少”。但是，由于我使用的是 ExpressionEngine (CMS) 模板和条目，因此页面上每个“显示更多”按钮的 id 都是相同的，导致其他按钮更改其 innerText 当它们没有被实际点击时的值。我需要我的代码来反射(reflect)仅单击一个按钮。

由于我使用的是 CMS 模板，因此我只想使用 HTML 和 JavaScript。

这是我的代码:

{if image:total>6}
<button class="btn btn-primary mx-auto" id="showMoreButton" type="button" data-toggle="collapse" data-target="#collapse-{embed:park_url}-{park_facilities_relate:url_title}" aria-expanded="false" aria-controls="collapseExample" onclick="showLess()">SHOW MORE</button>
{/if}       

<script>
    var status = "less";
    function showLess() {
        if (status == "less") {
            document.getElementById("showMoreButton").innerText = "SHOW LESS";
            status = "more";
        } else if (status == "more") {
            document.getElementById("showMoreButton").innerText = "SHOW MORE";
            status = "less"
        }
    }
</script>

实际发生的结果根据 script 标记的放置位置而有所不同(如果我将 script 标记放在 button 代码下面，如果 script 代码位于 button 代码上方)。这是正在发生的事情的图像:

Answer 1

要更改按钮文本，您可以使用该事件而不是 getElementById()。 为此，将 this 添加到按钮上的函数调用中。

onclick=”showLess(this)”

这样您就可以获得您实际单击的按钮的所有属性。在脚本中它可能看起来像:

function showLess(event) {      
   if (event.innerText == "SHOW MORE") {
        event.innerText = "SHOW LESS";
    } else if (event.innerText == "SHOW LESS") {
        event.innerText = "SHOW MORE";
    }
}

对画廊的实际展示一无所知，所以无法提供帮助，但这样至少按钮可以工作。