Javascript 使for循环更加优雅

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

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

我的脚本工作得很好，但我怀疑它不够高效和优雅，因为我在每个按钮上都附加了一个庞大的函数。for循环会更好吗

下面是第一个按钮的javascript。重复六次：-(

frag1a.png是可见图像。frag2b、frag3b等是不可见图像

---

我希望这是清楚的。如果需要，请探究清楚…

因为您使用的是字符串，您可以轻松地附加一个数字：

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";
  }
}

功能交换段（索引）{
对于（var i=1；i由于您使用的是字符串，因此可以轻松地附加一个数字：

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";
  }
}

功能交换段（索引）{
对于（var i=1；i
函数swapSegment1（）{
var image=document.getElementById（“img1”）；
image.src=“images/frag1a.png”；
对于（var i=2；i
函数swapSegment1（）{
var image=document.getElementById（“img1”）；
image.src=“images/frag1a.png”；
对于（var i=2；i，无循环，但使用递归：

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

没有循环，但使用递归：

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

将三元运算符用于a/b逻辑

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

    }
}

函数swapSegment1（）
{
对于（变量i=1；1<6；i++）
{
（document.getElementById）（'img'+i）.src='images/frag'+i+（i==1？'a'：'b'）；
}
}
对a/b逻辑使用三元运算符

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

    }
}

函数swapSegment1（）
{
对于（变量i=1；1<6；i++）
{
（document.getElementById）（'img'+i）.src='images/frag'+i+（i==1？'a'：'b'）；
}
}
建议在问题中放一个精简但完整的示例（即使有点长），并放一份副本，这样人们可以更好地了解你在说什么。此外，你还说“frag2b、frag3b等是不可见的图像”--与其在
img
元素中显示不可见的图像，为什么不隐藏
img
元素？建议在问题中放一个精简但完整的示例（即使有点长），并放一份副本，这样人们就可以更好地了解你在说什么。另外，你说“frag2b、frag3b等是不可见图像”--与其在
img
元素中显示不可见图像，为什么不隐藏
img
元素？