Question

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

我还有一个问题。当我单击div2时，上一个div应该进入其原始状态。我应该一次只能更改一个div的背景和图像。

这是我的代码：

        var count = 0;

        function setColor1(id) {
            var property = document.getElementById(id + "div");
            var propertyImg = document.getElementById(id + "img");
            if (count == 0) {
                property.style.backgroundColor = "blue";
                propertyImg.src = '../Images/Icons/image2.png';
                count = 1;
            } else {
                property.style.backgroundColor = "#fff"; 
                propertyImg.src = '../Images/Icons/image1.png';
                count = 0
            }
        }
        
        function setColor2(id) {
            var property = document.getElementById(id + "div");
            var propertyImg = document.getElementById(id + "img");
            if (count == 0) {
                property.style.backgroundColor = "blue";
                propertyImg.src = '../Images/Icons/image4.png';
                count = 1;
            } else {
                property.style.backgroundColor = "#fff";
                propertyImg.src = '../Images/Icons/image3.png';
                count = 0
            }
        }
        
                function setColor3(id) {
            var property = document.getElementById(id + "div");
            var propertyImg = document.getElementById(id + "img");
            if (count == 0) {
                property.style.backgroundColor = "blue";
                propertyImg.src = '../Images/Icons/image6.png';
                count = 1;
            } else {
                property.style.backgroundColor = "#fff";
                propertyImg.src = '../Images/Icons/image5.png';
                count = 0
            }
        }

.buttonclass {
	margin-left: 30px;
	margin-bottom: 2px;
	margin-top: 2px;
	width: 25px;
	height: 25px;
	box-sizing: border-box;
	vertical-align: middle;
	text-align: center;
	position: absolute;
	z-index: 100000;
	border: solid 1px #777;
	background-color: green;
	padding: 0px;

}

<div class="buttonclass" id="1div" onclick="setColor1(1);" >
    <img id="1img" src="~/Images/Icons/image1.png">
</div>
<div class="buttonclass" id="2div" onclick="setColor2(1);" >
    <img id="1img" src="~/Images/Icons/image3.png">
</div>
<div class="buttonclass" id="3div" onclick="setColor3(1);" >
    <img id="3img" src="~/Images/Icons/image5.png">
</div>

Answer 1

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

<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>

。

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';
  });
}

其他方法是使用类设置颜色css。

Answer 2

只需将它们全部放在一个函数中，该函数根据传递给它的id参数进行所有必要的计算：

var count = 0;

function setColor(id) {
  var property = document.getElementById(id + "div");
  var propertyImg = document.getElementById(id + "img");
  if (count == 0) {
    property.style.backgroundColor = "blue";
    propertyImg.src = '../Images/Icons/image'+(id*2)+'.png';
    count++;
  } else {
    property.style.backgroundColor = "#fff";
    propertyImg.src = '../Images/Icons/image'+id+'.png';
    count = 0
  }
}

.buttonclass {
  margin-left: 30px;
  margin-bottom: 2px;
  margin-top: 2px;
  width: 25px;
  height: 25px;
  box-sizing: border-box;
  vertical-align: middle;
  text-align: center;
  position: absolute;
  z-index: 100000;
  border: solid 1px #777;
  background-color: green;
  padding: 0px;
}

<div class="buttonclass" id="1div" onclick="setColor(1);">
  <img id="1img" src="~/Images/Icons/image1.png">
</div>
<div class="buttonclass" id="2div" onclick="setColor(2);">
  <img id="2img" src="~/Images/Icons/image3.png">
</div>
<div class="buttonclass" id="3div" onclick="setColor(3);">
  <img id="3img" src="~/Images/Icons/image5.png">
</div>

重置其他div会使操作变得更加复杂，因为您必须将图像的原始src属性存储在某个地方（例如，存储在{{ 1}}）。

Onclick更改div背景颜色和图像的设置

2 个答案: