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

Question

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

到目前为止，我已经成功地仅针对一个文本(id =“1”)实现了这一点。我最大的问题是找不到如何通过多个 ID 获取元素的示例，尽管我也很想获得这方面的帮助。但我最大的问题是让 id="2"在单击时切换到单个文本。 IE。单击时“Hello hello”应更改为“Hej hej”，单击时“Good bye”应更改为“Hejdå”。

HTML

<button onclick="buttonToggle()" class="link" id="item1"><span id="1">Hello hello</span>/button>

<button onclick="buttonToggle()" class="link" id="item2"><span id="2">Good bye</span></button>

Javascript

function buttonToggle() {
  var x = document.getElementById("1");
  if (x.innerHTML === "Hello Hello") {
    x.innerHTML = "Hej hej";
  } else {
    x.innerHTML = "Hello Hello";
  }
}

Answer 1

这是可以帮助实现此目的的代码

<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>

我希望这会有所帮助。