如何选择当前单击的div？ 为什么我的函数没有执行？
[英]How can I select the currently clicked div? and why is my function not being executed?
问题描述
I want my image to change when a different div is clicked, but the problem is I don't know how to detect which div was clicked, and that my function isn't being executed. 
我希望单击不同的div时可以更改图像，但是问题是我不知道如何检测单击了哪个div，并且我的函数没有被执行。 Here is the code, and the W3 editor link : 这是代码，以及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>
It's in the if statement that I can't do the test, in the divHover(event) function, I'm new to javascript, and I don't really get why it's not working or returning what I want. 在ifH语句中，我无法进行测试，在divHover（event）函数中，我是javascript的新手，我真的不明白为什么它无法正常工作或返回我想要的东西。 Cheers 干杯
2 个解决方案
解决方案1
0 已采纳 2016-12-23 13:06:31
Try this. 尝试这个。 I gave every box a unique id in this example. 在此示例中，我为每个框指定了唯一的ID。 the end result is output of document.write (output of the divHover function) 最终结果是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>
解决方案2
0 2016-12-23 13:37:26
Some issues: 一些问题：
- Don't use
document.writefor debugging, butconsole.log不要使用document.write进行调试，而要使用console.log - Check the console for errors. 检查控制台是否有错误。 You would have noticed the error concerning
getElementByTagName: it should have ansafterElement.您可能已经注意到有关getElementByTagName的错误：在Element之后应该有一个s。 You have this mistake at two places.您在两个地方都有这个错误。 - A node list, as returned by
getElementsByTagName, does not have anonclickproperty, so that can't work.由getElementsByTagName返回的节点列表没有onclick属性，因此无法正常工作。 Instead define the click handler on the parent element and then check which child was clicked in the handler itself而是在父元素上定义单击处理程序，然后检查处理程序本身中单击了哪个子级 - You did not assign a function reference to
onclick, but instead called the handler.您没有为onclick分配函数引用，而是将其称为处理程序。 That is wrong.那是错的。 You should just pass the function reference without parentheses. 您应该只传递不带括号的函数引用。 The event object is passed automatically. 事件对象是自动传递的。 - The comparison with the
.tagNameproperty is weird: on the left side of the comparison you'd have a string like 'DIV' every time, while on the right side you would have a DOM element (if the spelling was corrected).具有.tagName属性的比较很奇怪：在比较的左侧，每次都有一个像'DIV'这样的字符串，而在右侧，则有一个DOM元素（如果拼写正确）。 This of course is never equal.当然，这永远是不平等的。 There is a shorter way to find the index of an element: var i = [].indexOf.call(currentDiv.parentNode.children, currentDiv);有一种查找元素索引的较短方法： var i = [].indexOf.call(currentDiv.parentNode.children, currentDiv); - You don't declare variables, like i . 您不像i那样声明变量。 This is considered bad practice and will fail in strict mode. 这被认为是不好的做法，并且在严格模式下会失败。
Here is some corrected code: 这是一些更正的代码：
var race = "0", helmet = "9", colour = "0";
function buildLink(race, helmet, colour) {
return "https://halo.bungie.net/stats/Halo3/PlayerModel.ashx?" +
"p1=" + race +
"&p2=" + helmet +
"&p3=0" + "&p4=0" + "&p5=0" +
"&p6=" + colour + "&p7=" + colour + "&p8=" + colour;
}
var link = buildLink(race, helmet, colour);
console.log(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 (var i = 0; i < 30; i++) {//to create the divs to choose the colours for our spartan
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";
divColour.style.boxSizing = "border-box";
divColour.style.cssFloat = "left";
divColour.style.color = "white";
divControl[i] = document.getElementById("colorPicker").appendChild(divColour);
cPicker[i] = i;
}
function divHover(event) {
var currentDiv = event.target;
var colour = [].indexOf.call(currentDiv.parentNode.children, currentDiv);
var linkHover = buildLink(race, helmet, colour);
console.log(linkHover);
}
document.getElementById("colorPicker").onclick = divHover;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
我无法理解为什么我的代码没有被执行 - i can not understand why my code is not being executed
如何获得 function 中被点击的数字的总和？ - How can I get the sum of numbers being clicked in function?
当我单击子 div 时如何关闭父 div 函数，当我再次单击父 div 时，该函数将活动 - How can I close parent div function when I clicked child div and when I clicked parent div again, the function will activity
如何更新在我的JavaScript代码中单击的div - How can I update a div that is clicked on in my javascript code
为什么CodeceptJS不执行测试中的步骤？ 为什么我看不到正在执行的测试？ - Why isn't CodeceptJS executing the steps in my test? And why can I not see the test being executed?
如何从定义的函数中选择单击的链接？ - How can I select the clicked link from a defined function?
为什么我在 React 中的 function 被调用了两次但执行不均？ - Why is my function in React being called twice but not equaly executed?
如何使用基于使用JavaScript单击的特定按钮的数组中的信息替换div上的信息？ - How can i replace information on a div with information from an array based on specific button being clicked using JavaScript?
如何根据 div 当前拥有的 class 来更新点击 function ？ - How can I update on click function depending on what class a div currently has?
我不明白为什么在此代码中两次执行displayAllTodoItems（） - I can't understand why displayAllTodoItems() is being executed twice in this code
相关标签