簡化代碼塊

有沒有辦法簡化我的這部分代碼？我一直在研究這個問題，最後得到了這個作品，或者做了我需要做的事情。我有一個數組（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

回答

相關問題