Создание более элегантного цикла

Question

У меня есть ряд из шести кнопок на веб-странице. Каждая кнопка заставляет изображение появляться в другом месте на странице. Нажмите кнопку один, и появится изображение номер один. Нажмите кнопку два, чтобы заменить изображение номер один прозрачным (невидимым) png и сделать изображение номер два появившимся. И так далее.

Если это похоже на галерею изображений, это действительно очень похоже.

Мой скрипт работает нормально, но я подозреваю, что он неэффективен и не элегантен, потому что я добавил громоздкую функцию к каждой кнопке. Будет ли цикл for делать эту работу лучше?

Вот javascript для первой кнопки. Это повторяется шесть раз: - (

function swapSegment1() {
var image = document.getElementById("img1")
image.src = "images/frag1a.png"
var image2 = document.getElementById("img2")
image2.src = "images/frag2b.png"
var image3 = document.getElementById("img3")
image3.src = "images/frag3b.png"
var image4 = document.getElementById("img4")
image4.src = "images/frag4b.png"
var image5 = document.getElementById("img5")
image5.src = "images/frag5b.png"
var image6 = document.getElementById("img6")
image6.src = "images/frag6b.png"
}

frag1a.png - видимое изображение. frag2b, frag3b и т. д. являются невидимыми изображениями.

Надеюсь, это понятно. Пожалуйста, уточните, если необходимо ...

Answer 1

Без циклов, но с использованием рекурсии:

function swapSegment(i){
    var img = document.getElementById('img' + i);
    img.src = 'images/frag' + i + (i > 1 ? 'b':'a') + '.png';
    --i && swapSegment(i);
}
swapSegment(6);

Answer 2

Поскольку вы работаете со строками, вы можете легко добавить число:

function swapSegment(index) {
  for (var i = 1; i <= 6; i++) {
    if (index == i)
      document.getElementById("img" + i).src = "images/frag" + i + "a.png";
    else
      document.getElementById("img" + i).src = "images/frag" + i + "b.png";
  }
}

Это может быть уменьшено еще больше, но эй, это все еще читабельно.

Answer 3

function swapSegment1() {
    var image = document.getElementById("img1");
    image.src = "images/frag1a.png";
    for (var i = 2; i <= 6; ++i) {
        image = document.getElementById("img" + i);
        image.src = "images/frag" + i + "b.png";
    }
}

Answer 4

Использует троичный оператор для логики a / b

function swapSegment1()
{
    for (var i = 1; 1 < 6; i++)
    {
        (document.getElementById) ('img' + i).src = 'images/frag' + i + (i === 1 ? 'a' : 'b');

    }
}