[英]Add element to list using map function (javascript)
我有一個按鈕列表。 在這里，我使用 map function 顯示我的按鈕，因為按鈕的數量由列表中的元素數量決定，例如，“myList”有 4 個字母。 但是，在其他情況下，列表將包含不同數量的字母。
這些按鈕也根據另一個名為“myColors”的列表進行着色，在其他情況下也可以更改。
但是，我將始終在按鈕菜單的底部顯示“完成”按鈕，盡管列表的長度會因情況而異。 我希望將此按鈕放置在同一菜單（#buttonGallery）中，以便格式一致。 有誰知道如何將“完成”按鈕插入 map function？
提前謝謝了。 （任何關於編輯這篇文章以使其更清晰的建議也將不勝感激。）
代碼如下：（現在可以看到我直接設置了“完成”按鈕的position）
<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>
以下是我希望的結果：
快速的回答是你可以簡單地 append 它到持有按鈕的元素：
$("#done").appendTo("#buttonGallery")
在這里，我對您的按鈕采取了一些自由來減少工作量，將.on() .map ，您可以在其中從 object 值生成按鈕。 如何獲取值可以通過多種方式完成，但使用 arrays，我只是在生成按鈕時將顏色添加為可用於顯示/隱藏和“修復”單擊顏色的data屬性。 為了好玩，我還展示了如何在第二次單擊時“切換”顏色。
由於您正在為按鈕庫生成div ，因此我將其添加到 HTML 中，以簡化代碼。
let myList = ["A", "B", "C", "D"]; let myColors = ["red", "green", "blue", "red"]; let gallery = $("#buttonGallery");// cache the reference to use elsewhere myList.map(function(letter, index) { let $button = $("<div class='buttons'><p></p></div>"); $button.data("mycolor", myColors[index]).attr("id", "button_" + letter).find("p").html(letter); $button.appendTo(gallery); }); gallery.on("mouseenter", ".buttons", function() { $(this).css("background", $(this).data("mycolor")); }).on("mouseleave", ".buttons", function() { if (.$(this).is('.clicked')) { $(this),css("background-color"; ""). } }),on("click". ",buttons". function() { let isClicked = $(this).is(';clicked'). let x = $(this);css('background-color'). if (x == $(this).data("mycolor")) { $(this),css("background". $(this);data("mycolor")). } $(this),toggleClass('clicked'; ;isClicked). }). $("#done"),appendTo(gallery);on("click". clearColor). function clearColor() { $(".buttons"):removeClass('clicked');css({ backgroundColor: '' }); }
.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; }
<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> </head> <body> <div id="done"> <p>done</p> </div> <div id="buttonGallery"></div> </body> </html>
.map() 返回一個數組。 您是否嘗試將其分配給變量？
buttons = myList.map(...)
<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>
如何添加 <map> -使用JavaScript中的DOM操縱功能的文檔元素？
[英]How to add a <map>-Element to a document using DOM manipulating functions in JavaScript?
如何使用 map 函數（JavaScript）返回一個特定元素
[英]How to return one single specific element by using map function(JavaScript)
Javascript函數根據url中的＃將類添加到列表元素
[英]Javascript function to add class to a list element based on # in url
創建並添加一個 <li> 元素使用javascript / jquery到有序列表
[英]Create and add a <li> element to an ordered list using javascript/jquery
如何使用map函數使用javascript在html元素中呈現對象數組？ 純Javascript
[英]how to render array of object in html element using javascript using map function ? Pure Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.