我将如何 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>