Javascript 如何使用相同的功能以不同的方式切换多个文本块/按钮？

我的HTML代码中有多个按钮。我希望每个按钮在单击时交换文本，然后在下次单击时再次交换回文本。重要的是，只有你点击的按钮才是切换文本，而且：每个按钮都有自己的替换文本

到目前为止，我已经成功地为一个纯文本id=1实现了这一点。我最大的问题是找不到如何通过多个ID获取元素的示例，尽管我也希望得到这方面的帮助。但我最大的问题是让id=2在单击时切换到单个文本。也就是说，Hello Hello应在单击时更改为Hej Hej，再见应在单击时更改为Hejdå

HTML

---

下面是有助于实现这一点的代码

<button onclick="buttonToggle(event)" class="link" id="item1">Hello hello</button>
<button onclick="buttonToggle(event)" class="link" id="item2">Good bye</button>

脚本代码：这里我创建了一个对象数组，每个对象都有关于其id、原始文本和替换文本的信息。单击按钮后，这些内容将被替换。您可以根据HTML在对象中添加多个按钮

<script>
        var buttonInformation = [{
            id: 'item1',
            originalText: "Hello Hello",
            replaceText: "Hej hej"
        }, {
            id: 'item2',
            originalText: "Good bye",
            replaceText: "Hejdå"
        }, ]

        function buttonToggle(event) {
            var id = event.currentTarget.id;
            matchingIdObject = buttonInformation.filter(function(e) {
                return e.id === id;
            })
            if (matchingIdObject.length == 1) {
                var x = document.getElementById(id);
                x.innerHTML = matchingIdObject[0].replaceText
                matchingIdObject[0].replaceText = matchingIdObject[0].originalText;
                matchingIdObject[0].originalText = x.innerHTML;
            }
        }
    </script>

---

我希望这会有所帮助。

欢迎来到社区。正如您所提到的，您希望使用多个ID访问元素，但是一个元素不能有多个ID。此外，您还可以使用对象创建一个数组来处理多个按钮的此操作。：是！非常感谢。

<button onclick="buttonToggle(event)" class="link" id="item1">Hello hello</button>
<button onclick="buttonToggle(event)" class="link" id="item2">Good bye</button>

<script>
        var buttonInformation = [{
            id: 'item1',
            originalText: "Hello Hello",
            replaceText: "Hej hej"
        }, {
            id: 'item2',
            originalText: "Good bye",
            replaceText: "Hejdå"
        }, ]

        function buttonToggle(event) {
            var id = event.currentTarget.id;
            matchingIdObject = buttonInformation.filter(function(e) {
                return e.id === id;
            })
            if (matchingIdObject.length == 1) {
                var x = document.getElementById(id);
                x.innerHTML = matchingIdObject[0].replaceText
                matchingIdObject[0].replaceText = matchingIdObject[0].originalText;
                matchingIdObject[0].originalText = x.innerHTML;
            }
        }
    </script>