使用映射函数（javascript）将元素添加到列表中
我有一个按钮列表。这里，我使用映射函数显示我的按钮，因为按钮的数量由列表中元素的数量决定，例如，“myList”有4个字母。但是，在其他情况下，列表将包含不同数量的字母 按钮也根据另一个名为“myColors”的列表进行着色，在其他情况下也会发生变化 但是，我将始终在按钮菜单的底部显示“完成”按钮，尽管列表的长度因情况而异。我希望将此按钮放在同一菜单（#buttonGallery）中，以便格式保持一致。有人知道如何将“完成”按钮插入地图功能吗 非常感谢！（任何关于编辑这篇文章以使其更清晰的建议也将不胜感激。） 下面的代码：（现在，您可以看到我直接设置了“完成”按钮的位置）使用映射函数（javascript）将元素添加到列表中,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我有一个按钮列表。这里，我使用映射函数显示我的按钮，因为按钮的数量由列表中元素的数量决定，例如，“myList”有4个字母。但是，在其他情况下，列表将包含不同数量的字母 按钮也根据另一个名为“myColors”的列表进行着色，在其他情况下也会发生变化 但是，我将始终在按钮菜单的底部显示“完成”按钮，尽管列表的长度因情况而异。我希望将此按钮放在同一菜单（#buttonGallery）中，以便格式保持一致。有人知道如何将“完成”按钮插入地图功能吗 非常感谢！（任何关于编辑这篇文章以使其更清晰的建议也
.按钮{
宽度：150px；
高度：50px；
边框：纯色2px黑色；
文本对齐：居中；
颜色：黑色；
光标：指针；
背景色：白色；
保证金：2倍；
}
#钮扣{
利润率：10px；
填充：10px；
边框：纯色2px黑色；
宽度：155px；
}
#完成{
宽度：150px；
高度：50px；
边框：纯色2px黑色；
文本对齐：居中；
颜色：黑色；
光标：指针；
背景色：白色；
保证金：2倍；
}
完成
设$buttons=$（''）；
让myList=[“A”、“B”、“C”、“D”]；
让myColors=[“红色”、“绿色”、“蓝色”、“红色”]；
myList.map（函数（字母、索引）{
让$button=$（“”）
.addClass（“按钮”）
.attr（“id”、“按钮”+字母）
.html（“”+字母+””）
.on（“mouseenter”，function（）{
$（this.css（“背景”，myColors[index]）；
})
.on（“mouseleave”，函数（）{
if（！$（this）.hasClass（'clicked'））{
$（this.css（“背景”、“透明”）；
}
})
.on（“单击”，函数（）{
$（this.css（“背景”，myColors[index]）；
$（this.addClass（'clicked'）；
})
$button.append（$button）；
});
$（“正文”）。附加（$按钮）；
$（“#完成”）。在（“单击”，clearColor）；
函数clearColor（）{
$（“.buttons”）.css({
背景颜色：“透明”
});
$（“.buttons”）.removeClass（'clicked'）；
}
buttons=myList.map（…）
完成
//设$buttons=$（''） 快速的答案是，您可以简单地将其附加到按住按钮的元素中：
$（“#完成”）。附加到（“#按钮集合”）
在这里，我对您的按钮进行了一些调整，减少了工作量，将.on（）
的行为移到了.map
之外，您可以从对象值生成按钮。获取值的方式有多种，但使用数组，我只是在生成按钮时将其添加为数据
属性，该属性可用于显示/隐藏和“修复”单击时的颜色。为了好玩，我还演示了如何在第二次单击时“切换”颜色
由于您正在为您的按钮库生成一个div
，因此我将其添加到HTML中以简化代码
让myList=[“A”、“B”、“C”、“D”]；
让myColors=[“红色”、“绿色”、“蓝色”、“红色”]；
让画廊=$（“#按钮画廊”）；//缓存要在别处使用的引用
myList.map（函数（字母、索引）{
让$button=$（“”）；
美元按钮
.数据（“mycolor”，myColors[索引]）
.attr（“id”、“按钮”+字母）
.查找（“p”）
.html（信件）；
$button.appendTo（图库）；
});
画廊
.on（“鼠标指针“，”按钮“，”函数（）{
$（this.css（“背景”，$（this.data（“mycolor”））；
})
.on（“mouseleave”，“.buttons”，函数（）{
如果（！$（this）.is（'.clicked'））{
$（this.css（“背景色”）；
}
})
.on（“单击“，”按钮”，函数（）{
让isClicked=$（this）.is（'.clicked'）；
设x=$（this.css（'background-color'）；
如果（x=$（此）.data（“mycolor”））{
$（this.css（“背景”，$（this.data（“mycolor”））；
}
$（this.toggleClass（'clicked'，！isClicked））；
});
$（“完成”）
.附件（画廊）
。打开（“单击”，clearColor）；
函数clearColor（）{
$（“.buttons”）
.removeClass（'单击'）
.css({
背景颜色：“”
});
}
。按钮{
宽度：150px；
高度：50px；
边框：纯色2px黑色；
文本对齐：居中；
颜色：黑色；
光标：指针；
背景色：白色；
保证金：2倍；
}
#钮扣{
利润率：10px；
填充：10px；
边框：纯色2px黑色；
宽度：155px；
}
#完成{
宽度：150px；
高度：50px；
边框：纯色2px黑色；
文本对齐：居中；
颜色：黑色；
光标：指针；
背景色：白色；
保证金：2倍；
}
完成
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style media="screen">
.buttons {
width: 150px;
height: 50px;
border: solid 2px black;
text-align: center;
color: black;
cursor: pointer;
background-color: white;
margin: 2px;
}
#buttonGallery {
margin: 10px;
padding: 10px;
border: solid 2px black;
width: 155px;
}
#done {
width: 150px;
height: 50px;
border: solid 2px black;
text-align: center;
color: black;
cursor: pointer;
background-color: white;
margin: 2px;
}
</style>
</head>
<body>
<div id="done">
<p>done</p>
</div>
<script type="text/javascript">
let $buttons = $('<div id="buttonGallery">');
let myList = ["A", "B", "C", "D"];
let myColors = ["red", "green", "blue", "red"];
myList.map(function(letter, index) {
let $button = $("<div></div>")
.addClass("buttons")
.attr("id", "button_" + letter)
.html("<p>" + letter + "</p>")
.on("mouseenter", function() {
$(this).css("background", myColors[index]);
})
.on("mouseleave", function() {
if (!$(this).hasClass('clicked')) {
$(this).css("background", "transparent");
}
})
.on("click", function() {
$(this).css("background", myColors[index]);
$(this).addClass('clicked');
})
$buttons.append($button);
});
$("body").append($buttons);
$("#done").on("click", clearColor);
function clearColor() {
$(".buttons").css({
backgroundColor: 'transparent'
});
$(".buttons").removeClass('clicked');
}
</script>
</body>
</html>
<body>
<div id="buttonGallery"> <!-- add this line -->
<div id="done">
<p>done</p>
</div>
</div> <!-- add this line -->
<script type="text/javascript">
// let $buttons = $('<div id="buttonGallery">'); <-- remove this line
let $buttonGallery = $("#buttonGallery");
let myList = ["A", "B", "C", "D"];
let myColors = ["red", "green", "blue", "red"];
$buttonGallery.children(":not(#done)").remove(); // <-- add this to remove added button except done button.
myList.map(function(letter, index) {
let $button = $("<div></div>")
.addClass("buttons")
.attr("id", "button_" + letter)
.html("<p>" + letter + "</p>")
.on("mouseenter", function() {
$(this).css("background", myColors[index]);
})
.on("mouseleave", function() {
if (!$(this).hasClass('clicked')) {
$(this).css("background", "transparent");
}
})
.on("click", function() {
$(this).css("background", myColors[index]);
$(this).addClass('clicked');
})
$("#done").before($button); // <-- edit this line
});
// $("body").append($buttons); <-- remove this line
$("#done").on("click", clearColor);
function clearColor() {
$(".buttons").css({
backgroundColor: 'transparent'
});
$(".buttons").removeClass('clicked');
}
</script>
</body>