首頁猿問使用地圖功能（javascript...

使用地圖功能（javascript）將元素添加到列表

JavaScript

12345678_0001 2022-10-08 15:58:03

我有一個按鈕列表。在這里，我使用 map 函數(shù)顯示我的按鈕，因?yàn)榘粹o的數(shù)量由列表中元素的數(shù)量決定，例如，“myList”有 4 個字母。但是，在其他情況下，列表將包含不同數(shù)量的字母。這些按鈕也根據(jù)另一個名為“myColors”的列表進(jìn)行著色，在其他情況下也可以更改。但是，我將始終在按鈕菜單的底部顯示“完成”按鈕，盡管列表的長度會因情況而異。我希望將此按鈕放置在同一菜單（#buttonGallery）中，以便格式一致。有誰知道如何將“完成”按鈕插入地圖功能？提前謝謝了！（任何關(guān)于編輯這篇文章以使其更清晰的建議也將不勝感激。）代碼如下：（現(xiàn)在可以看到我直接設(shè)置了“完成”按鈕的位置）<html 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); });</html>以下是我希望的結(jié)果：

查看完整描述

3 回答

慕田峪9158850

TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超8個贊

快速的答案是您可以簡單地將其附加到持有按鈕的元素：

$("#done").appendTo("#buttonGallery")

在這里，我對您的按鈕采取了一些自由，以減少工作量，將.on()外部行為移動到.map您從對象值生成按鈕的位置。如何獲取值可以通過多種方式完成，但使用數(shù)組，我只是在生成按鈕時將顏色添加到按鈕中，該data屬性可用于顯示/隱藏和“修復(fù)”單擊時的顏色。為了好玩，我還展示了如何在第二次單擊時“切換”顏色。

由于您正在為您的按鈕庫生成一個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;

}

<head>

</head>

<body>

</div>

</body>

</html>

反對回復(fù) 2022-10-08

呼喚遠(yuǎn)方

TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超11個贊

<body>

</div>

</div>

// 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>

反對回復(fù) 2022-10-08

海綿寶寶撒

TA貢獻(xiàn)1809條經(jīng)驗(yàn) 獲得超8個贊

.map() 返回一個數(shù)組。您是否嘗試將其分配給變量？

buttons = myList.map(...)

反對回復(fù) 2022-10-08

3 回答
0 關(guān)注
118 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

使用地圖功能（javascript）將元素添加到列表

使用地圖功能（javascript）將元素添加到列表

3 回答

添加回答