Javascript 在站点上使用多个相同id的按钮仅切换一个“显示更多/显示更少”按钮

当我单击“显示更多”按钮时，将显示更多画廊图像，“显示更多”将更改为“显示较少”。但是，由于我使用的是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>

{if image:total>6}
显示更多
{/if}
var status=“less”；
函数showLess（）{
如果（状态=“更少”）{
document.getElementById（“showMoreButton”）.innerText=“SHOW LESS”；
status=“更多”；
}否则如果（状态=“更多”）{
document.getElementById（“showMoreButton”）.innerText=“显示更多”；
status=“less”
}
}

根据

脚本

标记的位置，实际发生的结果会有所不同（如果我将

脚本

标记放在

按钮

下面，而

脚本

代码放在

按钮

代码上面）。下面是正在发生的事情的图像：

---

因此，您可以在函数中使用.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，因此您可以在一种状态下更好地控制它，而不是在它以一种方式而不是另一种方式改变按钮文本时尝试使其成为某种形式。要更改按钮文本，您可以使用事件而不是getElementById（）。 为此，请将此添加到函数调用按钮中

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";
    }
}

---

我不知道画廊的实际展示情况，所以我也没办法，但这样至少按钮可以工作

这正是我所需要的，但看起来如果两个按钮都“显示更多”，那么只有一个按钮会变为“显示更少”想法@isac larsson？这是因为状态变量。单击第一个按钮时，状态变为“更多”。因此，当你点击第二个按钮时，你直接跳转到else-if语句。我在帖子中编辑了if语句。应该行的，就是这样。所以它只是加上了两个。。。令人惊叹的。谢谢你的帮助：）