有没有可能简化这个矩阵，比如用javascript构建的列选择？

我有一个网格，当在其中选择一个项目时，我想向当前项目之前或之后的每一列添加不同的类。我提出了以下函数来实现这一点，但不知道是否有更简单的方法来实现这一点：

var items=document.querySelectorAll（'.item'）；
var bodyWidth=200；
var itemWidth=50；
var itemsInRow=数学地板（车身宽度/项目宽度）；
var-activeItemIndexInRow；
var方向类；
var otherItemIndexInRow；
var removeClasses=函数（）{
项目。forEach（功能（项目，i）{
item.className='item'；
});
}
items.forEach（函数（selectedItem，selectedItemIndex）{
选择EdItem.addEventListener（'click'，函数（事件）{
移除类（）；
activeItemIndexInRow=SelectedItemIndexMath.floor（selectedItemIndex/itemsInRow）*itemsInRow；
选择editem.classList.add（'active'）；
items.forEach（函数（otherItem，otherItemIndex）{
otherItemIndexInRow=OtherItemIndexMath.floor（otherItemIndex/itemsInRow）*itemsInRow；
如果（otherItemIndexInRowactiveItemIndexInRow）directionClass='blue'；
otherItem.classList.add（directionClass）；
});
});
});
*{
保证金：0；
填充：0；
}
#包装纸{
宽度：400px；
}
.项目{
宽度：25%；
背景：灰色；
文本对齐：居中；
高度：100px；
线高：100px；
颜色：#fff；
字体大小：30px；
浮动：左；
}
.item.green{背景：绿色}
.item.red{背景：red}
.item.blue{背景：blue}
.item.active{背景：黑色}

12345678910
这应该行得通


var items=document.querySelectorAll（'.item'）；
var itemsInRow=4；
items.forEach（函数（selectedItem，selectedItemIndex）{
选择EdItem.addEventListener（'click'，函数（事件）{
var方向类；
选择editem.classList.add（'active'）；
var selectedCol=selectedItemIndex%ItemsRow；
items.forEach（函数（otherItem，otherItemIndex）{
otherItem.className='item'；
var otherCol=otherItemIndex%ItemsRow；
如果（otherItemIndex==SelectEditedIndex）directionClass='active'；
else if（otherCol==selectedCol）{
directionClass='红色'；
}否则{
directionClass=selectedCol
*{
保证金：0；
填充：0；
}
#包装纸{
宽度：400px；
}
.项目{
宽度：25%；
背景：灰色；
文本对齐：居中；
高度：100px；
线高：100px；
颜色：#fff；
字体大小：30px；
浮动：左；
}
.item.green{
背景：绿色
}
.item.red{
背景：红色
}
.蓝色{
背景：蓝色
}
.item.active{
背景：黑色
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10