前端菜鸟,写了代码bug不断,请求支援~~
在一个父div结构中放了两个子div结构,在两个子div中图片各自加入了一个onclick效果,但是点击第二个div层中的图片时,效果显示到了第一个子div图片上,请问什么问题?
代码附上:
<div id="div1" style="width:1000px;height:800px;background:url('../images/p2.bmp') no-repeat">
<div id="button1" class="box1" style="height:40px; width:60px; margin-right:745px; margin-top:234px; float:right">
<img id="picts" src="~/images/on.bmp" alt="">
<script>
function change_pic() {
var divDom = document.getElementById('box1')
var button = document.getElementById("button1");
var picts = document.getElementById("picts");
button.onclick = function () {
if (picts.getAttribute("src", 2) == "../images/on.bmp") {
picts.setAttribute("src", "../images/off.bmp");
} else {
picts.setAttribute("src", "../images/on.bmp");
};
}
}
change_pic();
</script>
</div>
<div id="button2" class="box2" style="height:40px; width:60px; margin-right:500px; margin-top:200px; float:right">
<img id="picts" src="~/images/on1.bmp" alt="">
<script>
function change_pic() {
var divDom = document.getElementById('box2')
var button = document.getElementById("button2");
var picts = document.getElementById("picts");
button.onclick = function () {
if (picts.getAttribute("src", 2) == "../images/on1.bmp") {
picts.setAttribute("src", "../images/off1.bmp");
} else {
picts.setAttribute("src", "../images/on1.bmp");
};
}
}
change_pic();
</script>
</div>
</div>