简化代码块

有没有办法简化我的这部分代码？我一直在研究这个问题，最后得到了这个作品，或者做了我需要做的事情。我有一个数组（6 * 6），当你点击图像时，它将围绕它的所有其他图像变成相同的颜色。我只使用红色和蓝色，对不起，我没有使用分号，但我稍后会修复它。那么有人能帮我吗？如果你需要整个程序，我也可以上传。简化代码块

function vClick(iRow, iCol) 
{ 
    var i, j; 

    if (astrColor[iRow][iCol] == 'r') 
    { 
     if ((iRow - 1) < 0) 
     { 
      for (i = iRow; i <= (iRow + 1) ; i++) 
      { 
       if ((iCol - 1) < 0) 
       { 
        for (j = iCol; j <= (iCol + 1) ; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'rcircle.png'; 
         astrColor[i][j] = 'r'; 
        } 
       } 
       else if ((iCol + 1) > 5) 
       { 
        for (j = (iCol - 1) ; j <= iCol; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'rcircle.png'; 
         astrColor[i][j] = 'r'; 
        } 
       } 
       else 
       { 
        for (j = (iCol - 1) ; j <= (iCol + 1) ; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'rcircle.png'; 
         astrColor[i][j] = 'r'; 
        } 
       } 
      } 
     } 
     else if ((iRow + 1) > 5) 
     { 
      for (i = (iRow - 1) ; i <= iRow; i++) 
      { 
       if ((iCol - 1) < 0) 
       { 
        for (j = iCol; j <= (iCol + 1) ; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'rcircle.png'; 
         astrColor[i][j] = 'r'; 
        } 
       } 
       else if ((iCol + 1) > 5) 
       { 
        for (j = (iCol - 1) ; j <= iCol; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'rcircle.png'; 
         astrColor[i][j] = 'r'; 
        } 
       } 
       else 
       { 
        for (j = (iCol - 1) ; j <= (iCol + 1) ; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'rcircle.png'; 
         astrColor[i][j] = 'r'; 
        } 
       } 
      } 
     } 
     else if((iCol - 1) < 0) 
     { 
      for (i = (iRow - 1) ; i <= (iRow + 1) ; i++) 
      { 
       for (j = iCol ; j <= (iCol + 1) ; j++) 
       { 
        var strID = "img" + i + "," + j; 
        document.getElementById(strID).src = 'rcircle.png'; 
        astrColor[i][j] = 'r'; 
       } 
      } 
     } 
     else if((iCol + 1) > 5) 
     { 
      for (i = (iRow - 1) ; i <= (iRow + 1) ; i++) 
      { 
       for (j = (iCol - 1) ; j <= iCol ; j++) 
       { 
        var strID = "img" + i + "," + j; 
        document.getElementById(strID).src = 'rcircle.png'; 
        astrColor[i][j] = 'r'; 
       } 
      } 
     } 
     else 
     { 
      for (i = (iRow - 1) ; i <= (iRow + 1) ; i++) 
      { 
       for (j = (iCol - 1) ; j <= (iCol + 1) ; j++) 
       { 
        var strID = "img" + i + "," + j; 
        document.getElementById(strID).src = 'rcircle.png'; 
        astrColor[i][j] = 'r'; 
       } 
      } 
     }    
    } 
    else 
    { 
     if ((iRow - 1) < 0) 
     { 
      for (i = iRow; i <= (iRow + 1) ; i++) 
      { 
       if ((iCol - 1) < 0) 
       { 
        for (j = iCol; j <= (iCol + 1) ; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'bcircle.png'; 
         astrColor[i][j] = 'b'; 
        } 
       } 
       else if ((iCol + 1) > 5) 
       { 
        for (j = (iCol - 1) ; j <= iCol; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'bcircle.png'; 
         astrColor[i][j] = 'b'; 
        } 
       } 
       else 
       { 
        for (j = (iCol - 1) ; j <= (iCol + 1) ; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'bcircle.png'; 
         astrColor[i][j] = 'b'; 
        } 
       } 
      } 
     } 

     else if ((iRow + 1) > 5) 
     { 
      for (i = (iRow - 1) ; i <= iRow; i++) 
      { 
       if ((iCol - 1) < 0) 
       { 
        for (j = iCol; j <= (iCol + 1) ; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'bcircle.png'; 
         astrColor[i][j] = 'b'; 
        } 
       } 
       else if ((iCol + 1) > 5) 
       { 
        for (j = (iCol - 1) ; j <= iCol; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'bcircle.png'; 
         astrColor[i][j] = 'b'; 
        } 
       } 
       else 
       { 
        for (j = (iCol - 1) ; j <= (iCol + 1) ; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'bcircle.png'; 
         astrColor[i][j] = 'b'; 
        } 
       } 
      } 
     } 
     else if ((iCol - 1) < 0) 
     { 
      for (i = (iRow - 1) ; i <= (iRow + 1) ; i++) 
      { 
       for (j = iCol ; j <= (iCol + 1) ; j++) 
       { 
        var strID = "img" + i + "," + j; 
        document.getElementById(strID).src = 'bcircle.png'; 
        astrColor[i][j] = 'b'; 
       } 
      } 
     } 
     else if ((iCol + 1) > 5) 
     { 
      for (i = (iRow - 1) ; i <= (iRow + 1) ; i++) 
      { 
       for (j = (iCol - 1) ; j <= iCol ; j++) 
       { 
        var strID = "img" + i + "," + j; 
        document.getElementById(strID).src = 'bcircle.png'; 
        astrColor[i][j] = 'b'; 
       } 
      } 
     } 
     else 
     { 
      for (i = (iRow - 1) ; i <= (iRow + 1) ; i++) 
      { 
       for (j = (iCol - 1) ; j <= (iCol + 1) ; j++) 
       { 
        var strID = "img" + i + "," + j; 
        document.getElementById(strID).src = 'bcircle.png'; 
        astrColor[i][j] = 'b'; 
       } 
      } 
     }   
    } 
}

来源

2014-11-06 dmbfan42

我假设你需要改变周围的所有图像，而不仅仅是上，下，左，右。另外我假设你会正确调用vClick（我的意思是只在需要时）。最后，由于这是第一个想法，因此这项工作可能无法完美运行。

我的想法是只从[i-1，j-1]到[i + 1，j + 1]迭代一次，并使用一个函数，只有当它存在时才会改变给定的项目。

function vClick(iRow, iCol) 
{ 
for (i = iRow-1; i<=iRow+1; i++) 
    for (j = iCol-1; j<=iCol+1; j++) 
     changeImage(i,j); 
} 

function changeImage(i,j) 
{ 
var strID = "img" + i + "," + j; 
var theImage = document.getElementById(strID); 
if (theImage != null) 
    if (theImage.src == 'bcircle.png') 
     {theImage.src = 'rcircle.png'; astrColor[i][j] = 'r'; 
    else 
     {theImage.src = 'bcircle.png'; astrColor[i][j] = 'b';} 

}

来源

2014-11-06 23:02:24 carlosherrera

你先生是个天才！谢谢，它的工作方式！ – dmbfan42 2014-11-06 23:21:50

我很高兴它为你工作！ – carlosherrera 2014-11-08 01:35:58

DRY将相同的代码块放入辅助方法中，然后调用它们。

它也将帮助你的整个代码的可读性，就像现在，我可以告诉你为列和行是否在某个值范围内做了一堆逻辑。

为了得到更好的建议，请用简单的英文解释一下你的算法（思维方式），因为我可以诚实地阅读任何东西。

来源

2014-11-06 22:47:59

我有一个数组（6 * 6），当你点击任何图像时，它将围绕它的所有其他图像变成相同的颜色。我只使用红色和蓝色。 – dmbfan42 2014-11-06 22:50:24

回答

相关问题