Question

我在网页上有一排六个按钮。每个按钮都会使图像显示在页面的其他位置。单击按钮1，出现图像编号1。单击按钮2将图像编号1替换为透明（不可见）png，并显示图像编号2。等等。

如果它听起来像图库，那确实非常相似。

我的脚本工作正常，但我怀疑它不高效或优雅，因为我为每个按钮附加了一个笨重的功能。 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(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 2

没有循环但使用递归：

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 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');

    }
}

使循环更优雅

4 个答案: