仅切换一个显示更多/显示较少的按钮，同时显示多个具有相同ID的按钮

Question

当我单击“显示更多”按钮时，显示更多的图库图像，并且“显示更多”更改为“显示较少”。但是，由于我使用的是ExpressionEngine（CMS）模板和条目，因此页面上的每个“显示更多”按钮的id都是相同的，导致其他按钮在它们更改时的innerText值尚未真正被点击。我需要我的代码仅反映一个被单击的按钮。

由于我使用的是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

要更改Button文本，可以使用事件而不是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";
    }
}

对画廊的实际展示一无所知，因此无济于事，但这种方式至少可以使按钮起作用。

Answer 2

所以您可以做的是在函数中使用.id。

var status = "less";
function showLess() {
    if (status == "less") {
      document.getElementById("showMoreButton").id = "showLessButton";
        document.getElementById("showMoreButton").innerText = "SHOW LESS";
        status = "more";
    } else if (status == "more") {
      document.getElementById("showLessButton").id = "showMoreButton";
        document.getElementById("showMoreButton").innerText = "SHOW MORE";
        status = "less"
    }
}

我认为我有正确的逻辑，但值得思考。它要做的全部就是更改元素的ID，因此它保持唯一的ID，因此您可以在一种状态下更好地控制它，而不是试图以一种方式比另一种方式将其制成某种东西