Нажатие на одну кнопку изменяет несколько связанных изображений на странице. Как адаптировать это для нескольких кнопок, КАЖДОГО с несколькими связанными изображениями?

Question

Следующий код работает для изменения нескольких связанных изображений на одной странице при нажатии одной кнопки:

<!-- RR buttons -->
<div class="wrapper-9">
<button onclick="changeImage()" id="2" class="box">2</button>
</div>

<!-- RR images -->
<img id="theFirstImage" src="RR/images/singles/RR-1.png">
<img id="theSecondImage" src="RR/images/rhythm-1.png">
<img id="theThirdImage" src="RR/images/riff-1.png">


<script>
function changeImage()
{
document.getElementById('theFirstImage').src="RR/images/singles/RR-2.png";
document.getElementById('theSecondImage').src="RR/images/rhythm-2.png";
document.getElementById('theThirdImage').src="RR/images/riff-2.png";
}
</script>

Как я могу адаптировать этот код для размещения МНОГИХ различных кнопок, а не только одной? У меня всего 54 кнопки. Мое соглашение об именах гарантирует, что все кнопки и изображения коррелируют по номеру: то есть кнопка «2» соответствует изображениям «RR-2.png», «rhythm-2.png» и «riff-2.png». «; кнопка «46» соответствует «RR-46.png», «rhythm-46.png» и «riff-46.png». Решение должно быть связано с извлечением числа из идентификатора данной кнопки, а затем вставкой его в исходный вызов ... но я не могу понять, как это сделать. Я пробовал это, но безрезультатно:

<!-- RR buttons -->
<div class="wrapper-9">
<button onclick="changeImage()" id="1" class="box">1</button>
<button onclick="changeImage()" id="2" class="box">2</button>
<button onclick="changeImage()" id="3" class="box">3</button>
</div>

<!-- RR images -->
<img id="theFirstImage" src="RR/images/singles/RR-1.png">
<img id="theSecondImage" src="RR/images/rhythm-1.png">
<img id="theThirdImage" src="RR/images/riff-1.png">

<script>
function changeImage()
{
var currentLabel = $(this).closest('.box').find('button').attr("id");
document.getElementById('theFirstImage').src="RR/images/singles/RR-'" + currentLabel + "'.png";
document.getElementById('theSecondImage').src="RR/images/rhythm-'" + currentLabel + "'.png";
document.getElementById('theThirdImage').src="RR/images/riff-'" + currentLabel + "'.png";
}
</script>

Приветствую любое понимание того, что я делаю неправильно!

Answer 1

Ах, решил это! Нашел ответ здесь: JavaScript - onClick, чтобы получить идентификатор нажатой кнопки

<!-- RR buttons -->
<div class="wrapper-9">
<button class="box" id="1" onClick="reply_click(this.id)">1</button>
<button class="box" id="2" onClick="reply_click(this.id)">2</button>
<button class="box" id="3" onClick="reply_click(this.id)">3</button>
</div>

<!-- RR images -->
<img id="theFirstImage" src="RR/images/singles/RR-1.png">
<img id="theSecondImage" src="RR/images/rhythm-1.png">
<img id="theThirdImage" src="RR/images/riff-1.png">


<script type="text/javascript">
function reply_click(clicked_id)
{
document.getElementById('theFirstImage').src="RR/images/singles/RR-" + clicked_id + ".png";
document.getElementById('theSecondImage').src="RR/images/rhythm-" + clicked_id + ".png";
document.getElementById('theThirdImage').src="RR/images/riff-" + clicked_id + ".png";
}
</script>