Как по-разному переключать многочисленные текстовые блоки / кнопки, используя одну и ту же функцию?

Question

У меня есть несколько кнопок в моем коде HTML. Я хочу, чтобы каждая кнопка меняла текст при нажатии, а затем снова переключалась при следующем нажатии. Важно, что это только кнопка, которую вы нажимаете на этот текст переключения, а также: каждая кнопка имеет свой собственный текст замены.

Пока мне удалось сделать это только для одного текста (id = "1"). Моя самая большая проблема - не найти примеры того, как получить элементы по нескольким идентификаторам, хотя я бы тоже хотел получить помощь в этом. Но моя самая большая проблема - заставить id = "2" переключаться на отдельный текст при клике. Т.е. «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>

Код сценария: Здесь я создал массив объектов, и каждый объект имеет информацию о своем идентификаторе, исходном тексте и замене текста. Которые заменяются при нажатии кнопки. Вы можете добавить несколько кнопок в объекты согласно вашему 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>

Надеюсь, это поможет.