我有一个图像网格(棒球队和橄榄球队(，并带有与之相关的名称(如标题(。
我正在尝试做的是随机化带有名称的图像的位置，以便它们出现在网格的不同位置。
我可以很好地显示图像和名称(名称来自textarea并存储在名称array中(，但是一旦我点击随机按钮，img.src就会消失，留下空白点。
这些名称仍然是随机的，并且工作正常。
这是我到目前为止的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sports</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container-fluid">
<h1>Sports Random</h1>
<br>
<div class="container">
<div class="row" id="parent">
</div>
<div class="row">
</div>
<textarea id="textarea"></textarea>
<div id="buttonGroup">
<button id="random">Random</button>
<button id="baseball">Baseball</button>
<button id="football">Football</button>
<button id="reset">Reset</button>
</div>
</div>
<br>
</div>
<script src="js/main.js"></script>
</body>
</html>
JavaScript：
bGroup.addEventListener("click", function images(e) {
tDisplay.innerHTML = "";
for (var i = 1; i < names.length; i++) {
var newDiv = document.createElement("div");
var newImg = document.createElement("img");
var userName = document.createElement("p");
newDiv.className = "col-sm-3 col-md-3 col-lg-2"
newDiv.appendChild(newImg);
newDiv.appendChild(userName);
userName.textContent = names[Math.random() * i | 0];
if (e.target.id === "baseball") {
newImg.src = "images\baseball\team" + i + ".jpg";
} else if (e.target.id === "football") {
newImg.src = "images\football\team" + i + ".gif";
}
tDisplay.appendChild(newDiv);
};
});
// random the images
random.addEventListener("click", function random() {
for (var i = 0; i < tDisplay.children.length; i++) {
tDisplay.appendChild(tDisplay.children[Math.random() * i | 0]);
tDisplay.getElementsByTagName("p")[Math.random() * i | 0].textContent =
names[Math.random() * i | 0];
}
});
现在，我页面上的按钮位于div组(bGroup(中，然后我根据单击的按钮委派事件。
当我为"棒球"和"足球"图像提供单独的功能时，我就有了这个工作;只是试图减少代码。
随机按钮包含在按钮组中，但为了组织起见，我将其分开; 有点想知道这是否是好的做法？
如果可能的话，我希望严格用JavaScript来回答。
干扰
问题的原因是您的Random按钮有自己的"click"事件侦听器，同时是bGroup的子级，子级也具有"click"事件侦听器。
导致空克隆的确切过程有点无关紧要，但可以通过使用console.log()来检查(如果感兴趣(。
单击">随机"时，将触发tDisplay内容的随机化和<div><img><p></p></div>子项的初始化/创建。
您有两种选择：
附加到- Random的唯一侦听器中的
"click"事件的任一stopPropagation()。 - 或者在由
bGroup上的"click"触发的函数中包含随机化功能。
我在下面使用上述第二个选项构建了代码的简化版本。
- 由于随机化代码
Math.random() * i | 0被多次使用，因此我创建了一个函数来返回通过它解析的任何数字的随机结果。 - JS顶部的
const声明用于存储永远不会更改的值，并且在整个脚本中重复使用这些值。const 声明创建对值的只读引用。这并不意味着它所持有的值是不可变的，只是变量标识符不能重新分配。例如，在内容是对象的情况下，这意味着可以更改对象的内容(例如，其参数(。
- 我在合适的地方使用了
let而不是var，因为它的泄漏较少。let允许您声明范围仅限于使用它的块、语句或表达式的变量。这与var关键字不同， 关键字全局定义变量，或局部定义整个函数，而不考虑块范围。 - 我选择使用
forEach()而不是for循环来遍历names，但保留了for循环来处理 randization。
每个都有自己的优点。 forEach()调用的箭头函数使用两个参数;n和i，其中n是每个循环的name，i是name的index(循环计数器(。- 为了简洁起见，我还选择使用
querySelectorAll()而不是getElementsByTagName()。 - 这些更改有好处，但唯一重要的变化是将Random的
"click"处理移动到处理程序中以点击bGroup.
请注意，随机化可能不会每次都改变显示(随机的性质(，但继续点击，你会发现它确实有效;更长的namesArray(因此更多的图像(可能会更明显地随机化。
const tDisplay = document.querySelector( ".container" ),
bGroup = document.querySelector( "#buttonGroup" ),
names = [ "foo", "bar", "baz", "qux" ];
function randIndex( i ) {
return ( Math.random() * i | 0 );
}
bGroup.addEventListener( "click", function( evt ) {
let trg = evt.target.id;
if ( trg !== "random" ) {
tDisplay.innerHTML = "";
names.forEach( ( n, i ) => {
let newDiv = document.createElement( "div" ),
newImg = document.createElement( "img" ),
userName = document.createElement( "p" );
//newDiv.className = "col-sm-3 col-md-3 col-lg-2";
newDiv.appendChild( newImg );
newDiv.appendChild( userName );
userName.textContent = names[ randIndex( i ) ];
if ( trg === "sports" ) {
newImg.src = "https://lorempixel.com/100/70/sports/" + i;
} else if ( trg === "cats") {
newImg.src = "https://lorempixel.com/100/70/cats/" + i;
}
tDisplay.appendChild( newDiv );
} );
} else {
for ( let i = 0; i < tDisplay.children.length; i++ ) {
tDisplay.appendChild( tDisplay.children[ randIndex( i ) ] );
tDisplay.querySelectorAll( "p" )[ randIndex( i ) ].textContent =
names[ randIndex( i ) ];
}
}
});body {
font-family: sans-serif;
}
h1, p {
margin: .5em 0;
}
#buttonGroup {
margin-bottom: 1em;
}
.container div {
display: inline-block;
margin-right: 1em;
}<h1>Images Random</h1>
<div id="buttonGroup">
<button id="random">Random</button>
<button id="sports">Sports</button>
<button id="cats">Cats</button>
</div>
<div class="container"></div>