Javascript 单击div'的更改集；背景色与图像

我有5个图像作为按钮在div中。默认情况下，当我单击div1时，我正在以绿色背景显示div1的image1。我应该将背景颜色更改为蓝色，然后更改为image2。同样，当我点击div2时，以绿色背景显示div2的image3，我应该将背景颜色更改为蓝色，然后更改为image4，依此类推。现在我为每个div编写了不同的javascript函数。如何在单个函数中编写所有逻辑，而不是为每个div编写不同的函数

我还有一个问题。当我单击div2时，上一个div应该会恢复到其原始状态。我应该能够改变一次只有一个div的背景和图像

这是我的密码：

var计数=0；
函数setColor1（id）{
var属性=document.getElementById（id+“div”）；
var-propertyImg=document.getElementById（id+“img”）；
如果（计数=0）{
property.style.backgroundColor=“蓝色”；
propertyImg.src='../Images/Icons/image2.png'；
计数=1；
}否则{
property.style.backgroundColor=“#fff”；
propertyImg.src='../Images/Icons/image1.png'；
计数=0
}
}
函数setColor2（id）{
var属性=document.getElementById（id+“div”）；
var-propertyImg=document.getElementById（id+“img”）；
如果（计数=0）{
property.style.backgroundColor=“蓝色”；
propertyImg.src='../Images/Icons/image4.png'；
计数=1；
}否则{
property.style.backgroundColor=“#fff”；
propertyImg.src='../Images/Icons/image3.png'；
计数=0
}
}
函数setColor3（id）{
var属性=document.getElementById（id+“div”）；
var-propertyImg=document.getElementById（id+“img”）；
如果（计数=0）{
property.style.backgroundColor=“蓝色”；
propertyImg.src='../Images/Icons/image6.png'；
计数=1；
}否则{
property.style.backgroundColor=“#fff”；
propertyImg.src='../Images/Icons/image5.png'；
计数=0
}
}

.buttonclass{
左边距：30px；
边缘底部：2px；
边缘顶部：2倍；
宽度：25px；
高度：25px；
框大小：边框框；
垂直对齐：中间对齐；
文本对齐：居中；
位置：绝对位置；
z指数：100000；
边框：实心1px#777；
背景颜色：绿色；
填充：0px；
}

---

只需将它们全部放入一个函数中，该函数根据传递给它的

id

参数执行所有必要的计算：

var计数=0；
函数setColor（id）{
var属性=document.getElementById（id+“div”）；
var-propertyImg=document.getElementById（id+“img”）；
如果（计数=0）{
property.style.backgroundColor=“蓝色”；
propertyImg.src='../Images/Icons/image'+（id*2）+'.png'；
计数++；
}否则{
property.style.backgroundColor=“#fff”；
propertyImg.src='../Images/Icons/image'+id+'.png'；
计数=0
}
}

.buttonclass{
左边距：30px；
边缘底部：2px；
边缘顶部：2倍；
宽度：25px；
高度：25px；
框大小：边框框；
垂直对齐：中间对齐；
文本对齐：居中；
位置：绝对位置；
z指数：100000；
边框：实心1px#777；
背景颜色：绿色；
填充：0px；
}

---

有不同的方法可以做到这一点：

<div class="buttonclass" onclick="setColor(this);" data-id="1" data-selected="false">
    <img src="~/Images/Icons/image1.png">
</div>
<div class="buttonclass" onclick="setColor(this);" data-id="3" data-selected="false">
    <img src="~/Images/Icons/image3.png">
</div>
<div class="buttonclass" onclick="setColor(this);" data-id="5" data-selected="false">
    <img src="~/Images/Icons/image5.png">
</div>

---

另一种方法是使用类来设置颜色开关css。

谢谢！！这就是我想要的。

function setColor(element) {
  var id = Number(element.dataset.id);
  var prevSelected = document.querySelectorAll('[data-selected="true"]');
  element.dataset.selected = 'true';
  element.style.backgroundColor = "blue";
  element.firstElementChild.src = '../Images/Icons/image' + (id + 1) + '.png';
  prevSelected.forEach(div => {
    div.dataset.selected = 'false';
    div.style.backgroundColor = "green";
    div.firstElementChild.src = '../Images/Icons/image' + div.dataset.id + '.png';
  });
}