时间戳

首页 > 解决方案 > Onclick 更改 div 的背景颜色和图像集

javascript - Onclick 更改 div 的背景颜色和图像集

问题描述

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

标签： javascript

解决方案

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

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

推荐阅读