我將如何 go 關於在 html 網站上創建可編輯的“塊”，當按下加號按鈕時顯示？

Question

我對html/css/javascript非常陌生，我什至不知道我是否使用了正確的工具來制作它。

我正在嘗試創建一個帶有加號圖標的網站，按下該圖標會在頁面上創建一個面板和“精靈”。 該面板具有更改精靈的各種屬性的控件，並且可以被刪除，這也會刪除精靈。 按下加號圖標可以創建多個面板，每個面板都有一個單獨的精靈。

我專門詢問有關面板創建的問題。 這樣的事情是否可能，一個按鈕可以創建許多面板，每個面板都是獨特的並由用戶控制，還是我最好使用另一種語言？

如果重要的話，這是我目前擁有的按鈕的 html 代碼：

 <div class="createBlock"> <button onclick="createBlock()" class="buttonMain menuPlus">+</button> </div>

非常感謝！

Answer 1

您可以使用 jQuery 做到這一點。 這是您的 createBlock function 的樣子：

 /* create a counter to keep track of the blocks */ let counter = 0; /* this function will fire when the button is clicked */ function createBlock() { /* increase the counter by 1 */ counter++; /* clear all blocks after limit and reset counter */ if (counter > 20) { $(".block-container").find("[class*=block-el]").remove(); counter = 0; } /* create new block element */ let block = $("<div />", { "class": "block-el-" + counter }).append( /* append child elements to block */ $("<div />", { "class": "block-content" }).text("Content"), $("<div />", { "class": "block-close" }).text("close") ).appendTo( ".block-container" /* append block to dom */ ).css({ /* set dynamic styles on block element */ "z-index": counter, "left": Math.floor(Math.random() * 101) + "%", "top": Math.floor(Math.random() * 101) + "%" }); } /* remove the block when close button clocked. this is important, the selector cant be a dynamic object or it wont work */ $("body").on("click", ".block-close", function() { /*find the parent block */ $(this).closest("[class*=block-el]").fadeOut("fast", function() { /* after element fades out remove it */ $(this).remove(); /* subtract 1 from the blocks counter */ counter--; }); })

 /* Styling added just for example */ body, html { padding: 0; margin: 0; box-sizing: border-box; }.block-container { display: flex; justify-content: center; align-items: center; background: dodgerblue; width: 100vw; height: 100vh; overflow: hidden; position: relative; }.createBlock>button { border: none; outline: none; -webkit-appearance: none; background: aquamarine; color: #fff; padding: 12px; border-radius: 4px; z-index: 9000; position: relative; width: 140px; } [class*="block-el"] { display: grid; grid-template-rows: 60% 1fr; grid-gap: 20px; background: white; padding: 15px; border-radius: 6px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .1)); width: 140px; height: 140px; max-width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }.block-content { background: slategrey; border-radius: 6px; display: flex; justify-content: center; align-items: center; text-align: center; color: white; }.block-close { display: flex; justify-content: center; align-items: center; text-align: center; background: black; color: white; cursor: pointer; border-radius: 4px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="block-container"> <div class="createBlock"> <button onclick="createBlock()" class="buttonMain menuPlus">+</button> </div> </div>