JavaScript 在点击时设置 z-index [英] JavaScript set z-index on click
问题描述
我制作了一个网站，其中包含一个随机生成 50 个圆形
HTML
<head lang="zh-cn"><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="index_styling.css"><script type="text/javascript" src="index_scripts.js"></script><标题><h1>首尾，分配#6</h1></标题><div id="orange_strip"></div><身体><表格><ul><li><input type="button" name="add" value="Add Square"><input type="button" name="change" value="更改所有方块颜色"><input type="button" name="reset" value="重置所有方块"></ul><div id="显示"></表单><页脚><div id="copyright">Copyright © 2016 - First Mid Last </div></页脚></html>
JavaScript
window.onload = function() {for (var i = 0; i <50; i++) {var display_div = document.getElementById("display");var circle = document.createElement("div");var randNum = getRandomDimension(5000);circle.setAttribute("class", "circle");circle.style.backgroundColor = getRandomColor();circle.style.position = "绝对";circle.style.left = getRandomDimension(550);circle.style.top = getRandomDimension(450);circle.addEventListener("点击"，bringToFront(circle));display.appendChild(circle);}}功能带来前(元素){element.style.zIndex = "1";}函数 getRandomColor() {var 字母 = "0123456789abcdef";var 结果 = "#";for (var i = 0; i <6; i++) {结果 += 字母.charAt(parseInt(Math.random() * 字母.长度));}返回结果；}函数 getRandomDimension(max) {var num = Math.floor((Math.random() * max) + 1);var str = num.toString();返回 str += "px";}这一行:
circle.addEventListener("点击"，bringToFront(circle));...是否不添加事件侦听器.它立即调用您的 bringToFront() 方法，然后尝试将其返回值分配为侦听器，除非返回值是 undefined.(同时，在循环中立即调用该函数的效果意味着所有 div 在创建时都设置为 z-index: 1.)
您应该传递对函数的引用(注意函数名后没有()):
circle.addEventListener("点击"，bringToFront);...然后将函数更改为与this一起使用，因为this会在为事件调用该函数时自动设置为单击的元素:
function becomeToFront() {this.style.zIndex = "1";}I made a website which consists of a display area that randomly spawns 50 circular <div> elements. I want to make it so when one of the circles is clicked, it comes to the foreground. I thought using the addEventListener function on each circle as it's created would work but I can't get it to do anything. Thank you.
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="index_styling.css">
<script type="text/javascript" src="index_scripts.js"></script>
</head>
<header>
<h1>First Last, Assignment #6</h1>
</header>
<div id="orange_strip"></div>
<body>
<form>
<ul>
<li>
<input type="button" name="add" value="Add Square">
<input type="button" name="change" value="Change All Square Colors">
<input type="button" name="reset" value="Reset All Squares">
</li>
</ul>
<div id="display">
</div>
</form>
</body>
<footer>
<div id="copyright">Copyright © 2016 - First Mid Last</div>
</footer>
</html>
JavaScript
window.onload = function() {
for (var i = 0; i < 50; i++) {
var display_div = document.getElementById("display");
var circle = document.createElement("div");
var randNum = getRandomDimension(5000);
circle.setAttribute("class", "circle");
circle.style.backgroundColor = getRandomColor();
circle.style.position = "absolute";
circle.style.left = getRandomDimension(550);
circle.style.top = getRandomDimension(450);
circle.addEventListener("click", bringToFront(circle));
display.appendChild(circle);
}
}
function bringToFront(element) {
element.style.zIndex = "1";
}
function getRandomColor() {
var letters = "0123456789abcdef";
var result = "#";
for (var i = 0; i < 6; i++) {
result += letters.charAt(parseInt(Math.random() * letters.length));
}
return result;
}
function getRandomDimension(max) {
var num = Math.floor((Math.random() * max) + 1);
var str = num.toString();
return str += "px";
}
This line:
circle.addEventListener("click", bringToFront(circle));
...does not add an event listener. It calls your bringToFront() method immediately and then attempts to assign its return value as a listener except the return value is undefined. (Meanwhile, the effect of calling that function immediately within the loop means all of your divs get set to z-index: 1 upon their creation.)
You should be passing a reference to the function (note there is no () after the function name):
circle.addEventListener("click", bringToFront);
...and then change the function to work with this, because this will automatically be set to the clicked element at the time the function is called for the event:
function bringToFront() {
this.style.zIndex = "1";
}
这篇关于JavaScript 在点击时设置 z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
