다른 div를 클릭하면 이미지가 변경되기를 원하지만 문제는 어떤 div가 클릭되었는지 감지하는 방법을 모르고 내 기능이 실행되지 않는다는 것입니다. 다음은 코드와 W3 편집기 링크입니다 .
<!DOCTYPE html>
<html>
<head>
<style>
#profile {
background-image: url("");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 304px;
height: 304px;
box-sizing: border-box;
border: 2px solid white;
-webkit-box-shadow: 10px -7px 106px -28px rgba(0,0,0,0.73);
-moz-box-shadow: 10px -7px 106px -28px rgba(0,0,0,0.73);
box-shadow: 10px -7px 106px -28px rgba(0,0,0,0.73);
transition: all 2s;
margin: 20px;
float: left;
image-rendering: auto;
}
#profile:hover {
//border: 2px solid rgba(101, 124, 226, 0.2);
//transform: rotateY(180deg);
}
#colorPicker {
width: 360px;
height: 300px;
//border: 1px solid grey;
float: left;
margin: 20px 20px 20px 0px;
box-sizing: border-box;
background: rgba(0,0,0,0.0);
-webkit-box-shadow: 10px -7px 106px -28px rgba(0,0,0,0.73);
-moz-box-shadow: 10px -7px 106px -28px rgba(0,0,0,0.73);
box-shadow: 10px -7px 106px -28px rgba(0,0,0,0.73);
}
#colorPicker div {
border: 1px solid black;
}
#colorPicker div:hover {
transform: scale(1.2);
border: 1px solid white;
}
</style>
</head>
<body>
<div id="profile" ><a href=""></a></div>
<div id="colorPicker">
<!--ColourPicker's 30 nested divs will be made with javascript, let's attempt, as we'll need them anyways-->
</div>
<script type="text/javascript">
var link;
var bungie = "https://halo.bungie.net/stats/Halo3/PlayerModel.ashx?";
var race = "0";
race = "p1="+race;
var helmet = "9";
var extraDetails = "&p3=0"+"&p4=0"+"&p5=0";
helmet = "&p2=" + helmet
var colour = "0";
var extraColour = "&p7="+colour+"&p8="+colour;
colour = "&p6="+colour;
link = bungie + race + helmet + extraDetails + colour + extraColour;
document.write(link);
document.getElementById("profile").style.backgroundImage='url(' + link + ')';
//----------------------------------------------------------------------------
var cPicker = new Array(30); //here the color codes will be stored and assigned to each div
var divControl = [];
for (i = 0; i < 30; i++) {//to create the divs to choose the colours for our spartan
/*colour = i;
extraColour = "&p7="+colour+"&p8="+colour;
colour = "&p6="+colour;
link = bungie + race + helmet + extraDetails + colour + extraColour;
document.write(link);
document.write('<br/>'); document.write('<br/>');*/
var divColour = document.createElement("div");
divColour.style.width = "16.38%";
divColour.style.height = "20%";
divColour.style.marginRight = "1px";
divColour.style.marginBottom = "1px";
divColour.style.backgroundColor = "red";//we have to get the color from the pictures, from the loaded links
divColour.style.boxSizing = "border-box";
//divColour.style.border = "1px solid black";
divColour.style.cssFloat = "left";
divColour.style.color = "white";
divControl[i] = document.getElementById("colorPicker").appendChild(divColour);
cPicker[i] = i;
}
function divHover(event) {
/*function myFunction(event) {
var x = event.target;
document.getElementById("demo").innerHTML = "Triggered by a " + x.tagName + " element";
}*/
var linkHover;
var currentDiv = event.target;
alert(currentDiv);
for (i = 0; i < 30; i++) {
if (currentDiv.tagName == document.getElementById("colorPicker").getElementByTagName("div")[i]) {
colour = i;
extraColour = "&p7="+colour+"&p8="+colour;
colour = "&p6="+colour;
linkHover = bungie + race + helmet + extraDetails + colour + extraColour;
//document.getElementById("profile").style.backgroundImage='url(' + linkHover + ')';
document.write(linkHover);
} else { };
}
//var x = event.clientX, y = event.clientY,
//elementMouseIsOver = document.elementFromPoint(x, y);
}
document.getElementById("colorPicker").getElementByTagName("div").onclick = divHover(event);
divControl[0].onclick = divHover;
//document.write(cPicker); //now we can link the individual div's with the links if we ever need to
</script>
</body>
</html>
테스트를 할 수 없다는 if 문, divHover (event) 함수에서 나는 자바 스크립트를 처음 사용하고 왜 작동하지 않거나 원하는 것을 반환하지 않는지 알 수 없습니다. 건배
이 시도. 이 예에서는 모든 상자에 고유 한 ID를 부여했습니다. 최종 결과는 document.write( divHover함수 출력)의 출력입니다.
var link;
var bungie = "https://halo.bungie.net/stats/Halo3/PlayerModel.ashx?";
var race = "0";
race = "p1="+race;
var helmet = "9";
var extraDetails = "&p3=0"+"&p4=0"+"&p5=0";
helmet = "&p2=" + helmet
var colour = "0";
var extraColour = "&p7="+colour+"&p8="+colour;
colour = "&p6="+colour;
link = bungie + race + helmet + extraDetails + colour + extraColour;
document.write(link);
document.getElementById("profile").style.backgroundImage='url(' + link + ')';
//----------------------------------------------------------------------------
var cPicker = new Array(30); //here the color codes will be stored and assigned to each div
var divControl = [];
for (i = 0; i < 30; i++) {//to create the divs to choose the colours for our spartan
/*colour = i;
extraColour = "&p7="+colour+"&p8="+colour;
colour = "&p6="+colour;
link = bungie + race + helmet + extraDetails + colour + extraColour;
document.write(link);
document.write('<br/>'); document.write('<br/>');*/
var divColour = document.createElement("div");
divColour.style.width = "16.38%";
divColour.style.height = "20%";
divColour.style.marginRight = "1px";
divColour.style.marginBottom = "1px";
divColour.style.backgroundColor = "red";//we have to get the color from the pictures, from the loaded links
divColour.style.boxSizing = "border-box";
//divColour.style.border = "1px solid black";
divColour.style.cssFloat = "left";
divColour.style.color = "white";
divColour.id = "halo"+i;
divControl[i] = document.getElementById("colorPicker").appendChild(divColour);
cPicker[i] = i;
}
function divHover(event) {
/*function myFunction(event) {
var x = event.target;
document.getElementById("demo").innerHTML = "Triggered by a " + x.tagName + " element";
}*/
var linkHover;
var currentDiv = event.target;
for (i = 0; i < 30; i++) {
var checkId = "halo"+i;
if (currentDiv.id == checkId) {
colour = i;
extraColour = "&p7="+colour+"&p8="+colour;
colour = "&p6="+colour;
linkHover = bungie + race + helmet + extraDetails + colour + extraColour;
//document.getElementById("profile").style.backgroundImage='url(' + linkHover + ')';
document.write(linkHover);
} else { };
}
//var x = event.clientX, y = event.clientY,
//elementMouseIsOver = document.elementFromPoint(x, y);
}
document.getElementById("colorPicker").addEventListener("click",divHover);
//document.write(cPicker); //now we can link the individual div's with the links if we ever need to#profile {
background-image: url("");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 304px;
height: 304px;
box-sizing: border-box;
border: 2px solid white;
-webkit-box-shadow: 10px -7px 106px -28px rgba(0,0,0,0.73);
-moz-box-shadow: 10px -7px 106px -28px rgba(0,0,0,0.73);
box-shadow: 10px -7px 106px -28px rgba(0,0,0,0.73);
transition: all 2s;
margin: 20px;
float: left;
image-rendering: auto;
}
#profile:hover {
//border: 2px solid rgba(101, 124, 226, 0.2);
//transform: rotateY(180deg);
}
#colorPicker {
width: 360px;
height: 300px;
//border: 1px solid grey;
float: left;
margin: 20px 20px 20px 0px;
box-sizing: border-box;
background: rgba(0,0,0,0.0);
-webkit-box-shadow: 10px -7px 106px -28px rgba(0,0,0,0.73);
-moz-box-shadow: 10px -7px 106px -28px rgba(0,0,0,0.73);
box-shadow: 10px -7px 106px -28px rgba(0,0,0,0.73);
}
#colorPicker div {
border: 1px solid black;
}
#colorPicker div:hover {
transform: scale(1.2);
border: 1px solid white;
}<div id="profile" ><a href=""></a></div>
<div id="colorPicker">
<!--ColourPicker's 30 nested divs will be made with javascript, let's attempt, as we'll need them anyways-->
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다