gpt4 book ai didi

javascript - 使 SVG 图标出现在 JS 待办事项列表项上

转载 作者:行者123 更新时间:2023-11-27 23:43:57 27 4
gpt4 key购买 nike

我正在尝试创建待办事项列表。每个 li 元素的元素都有两个 SVG 图标。此时,当您在输入字段中键入文本并单击其旁边的加号按钮时,会出现 li 元素但不会出现 SVG 图标。每次向待办事项列表添加新元素时,如何使 SVG 图标出现?

/*var removeSVG = svgElementFromString('<svg version="1.1" id="Capa_1" id="removeB" class="removeB" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 328.51 328.51" style="enable-background:new 0 0 328.51 328.51;" xml:space="preserve"><polygon points="229.044,88.858 164.255,153.647 99.466,88.858 88.858,99.466 153.647,164.255 88.858,229.044 99.466,239.651
164.255,174.862 229.044,239.651 239.651,229.044 174.862,164.255 239.651,99.466 "/> </svg>');*/


document.getElementById('button-plus').addEventListener('click', function(){
var value = document.getElementById('input').value;
if(value) addItem(value);
});
function addItem(text){
var list = document.getElementById('to-do');

item = document.createElement("li");
item.innerText = text;
var buttons = document.createElement('div');
buttons.classList.add('buttons');

var remove = document.createElement('button');
remove.classList.add('remove');
//remove.innerHTML = removeSVG;

var complete = document.createElement('button');
complete.classList.add('complete');
//complete.innerHTML = completeSVG;

buttons.appendChild(remove);
buttons.appendChild(complete);
item.appendChild(buttons);

list.appendChild(item);
}
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

header {
width: 100%;
height: 70px;
background: rgb(162, 193, 60);
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
box-shadow: 0 0 5px rgb(159, 160, 155);
padding: 0 10px 0 10px;
box-sizing: border-box;
display: flex;
align-items: center;
}

header input {
appearance: none;
text-indent: 10px;
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
width: 100%;
background: rgb(233, 255, 170);
height: 45px;
font-family: Century Gothic;
border: none;
box-sizing: border-box;
padding-right: 60px;
}

header button {
position: absolute;
right: 10px;
top: 13.5px;
height: 43px;
width: 50px;
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
appearance: none;
border: none;
background: rgb(238, 255, 173);
border-left: 2px solid rgb(162, 193, 60);
cursor: pointer;
}

button svg {
z-index: 6;
position: absolute;
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
right: 0;
top: -1px;
}/*
.container{
width: 100%;
margin: auto;
border: 1px solid black;
}*/
.to-do {
width: 100%;
float: left;
list-style-type: none;
box-sizing: border-box;
padding: 0;
/*border: 1px lid black;*/
}
.to-do li{
width: 85%;
background: white;
box-shadow: 0 0 5px rgb(159, 160, 155, 0.5);
min-height: 50px;
margin: auto;
border-radius: 5px;
box-sizing: border-box;
font-family: Century Gothic;
padding: 0 105px 0 25px;
position: relative;
margin-top: 25px;
display: flex;
align-items: center;

}
.to-do li .buttons{
position: absolute;
top: 0;
right: 0;
height: 50px;
width: 100px;
background: white;
}
.to-do li .buttons button{
appearance: none;
width: 47.5px;
height: 50px;
box-sizing: border-box;
position: relative;
background: white;
border: none;
cursor: pointer;
}
.to-do li .buttons button:last-of-type:before{
content: '';
width: 0.8px;
height: 29px;
background: gray;
opacity: 0.4;
float: left;
margin-left: -6px;
}/*
.to-do li button:nth-child(1):hover .x-fill{
fill: red;
transition-duration: 0.3s;
}
.to-do li button:nth-child(2):hover .tick-fill{
fill: orange;
transition-duration: 0.3s;
}*/
.complete svg{
fill: green;
}
.complete svg:hover{
fill: orange;
transition-duration: 0.3s;
}
.remove svg{
fill: gray;
opacity: 0.8;
}
.remove svg:hover{
fill: red;
opacity: 0.7;
transition-duration: 0.3s;
}
<head>

<title>To do List App</title>

</head>
<body>
<header>
<input type="text" placeholder="Next on my to do list is...." id="input">
<button id="button-plus">
<svg width="48" height="43" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<rect fill="#0186b2" height="28" id="svg_1" stroke="#000000" stroke-opacity="0" stroke-width="5" width="4" x="19.5" y="8.5"/>
<rect fill="#47bcbc" height="3" id="svg_2" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="0" stroke-width="5" width="28" x="7.5" y="20.5"/>
</svg>

</svg>
</button>
</header>
<div class="container">
<ul id="to-do" class="to-do">
<li>First to do <div class="buttons">
<button class="remove"><!--<svg width="45" height="50" id="delete-button" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<rect fill="gray" height="28.44763" class="x-fill" id="svg_1" stroke="#000000" stroke-opacity="0" stroke-width="5" transform="rotate(39.2894 22.2822 26.8218)" width="1.49252" x="21.53592" y="12.59797"/>
<rect fill="gray" height="30.65491" class="x-fill" id="svg_2" stroke="#000000" stroke-opacity="0" stroke-width="5" transform="rotate(-45.1764 22.3317 26.664)" width="1.70493" x="21.47928" y="11.33651"/>
</svg>-->
<svg version="1.1" id="Capa_1" id="removeB" class="removeB" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 328.51 328.51" style="enable-background:new 0 0 328.51 328.51;" xml:space="preserve">
<polygon points="229.044,88.858 164.255,153.647 99.466,88.858 88.858,99.466 153.647,164.255 88.858,229.044 99.466,239.651
164.255,174.862 229.044,239.651 239.651,229.044 174.862,164.255 239.651,99.466 "/>
</svg>
</button>
<button class="complete"><!--<svg width="45" height="50" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<rect fill="#21b221" height="28.44763" class="tick-fill" id="svg_1" stroke="#000000" stroke-opacity="0" stroke-width="5" transform="rotate(39.2894 24.2822 25.8218)" width="1.49252" x="23.53592" y="11.59797"/>
<rect fill="#21b221" height="12.26151" class="tick-fill" id="svg_2" stroke="#000000" stroke-opacity="0" stroke-width="5" transform="rotate(-45.1764 11.8548 33.147)" width="1.70493" x="11.00232" y="27.0162"/>
</svg>-->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve">

<path d="M38.252,15.336l-15.369,17.29l-9.259-7.407c-0.43-0.345-1.061-0.274-1.405,0.156c-0.345,0.432-0.275,1.061,0.156,1.406
l10,8C22.559,34.928,22.78,35,23,35c0.276,0,0.551-0.114,0.748-0.336l16-18c0.367-0.412,0.33-1.045-0.083-1.411
C39.251,14.885,38.62,14.922,38.252,15.336z"/>
</svg>
</button>
</div></li>
</ul>
<ul id="completed" class="completed">

</ul>
</div>

</body>

最佳答案

有一种简单的方法可以做到这一点。 Javascript 提供了强大的 cloneNode() 方法,可以克隆整个元素,包括它的所有子元素。您无需手动重新创建待办事项框的结构。

用法很简单:给你想要克隆的元素 - li - 一个 id 例如ma​​ster 并将您的 addItem() 函数更改为:

function addItem(text){
var list = document.getElementById('to-do');
var item = document.getElementById("master").cloneNode(true);
item.removeAttribute("id");
item.firstChild.data=text;
list.appendChild(item);
}

克隆实际上意味着克隆,因此克隆的元素将与原始元素共享相同的 id,这就是我们必须从克隆中删除 id 的原因。

这是一个例子:

document.getElementById('button-plus').addEventListener('click', function() {
var value = document.getElementById('input').value;
if (value) addItem(value);
});

function addItem(text) {
var list = document.getElementById('to-do');
var item = document.getElementById("master").cloneNode(true);
item.removeAttribute("id");
item.firstChild.data = text;
list.appendChild(item);
}
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

header {
width: 100%;
height: 70px;
background: rgb(162, 193, 60);
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
box-shadow: 0 0 5px rgb(159, 160, 155);
padding: 0 10px 0 10px;
box-sizing: border-box;
display: flex;
align-items: center;
}

header input {
appearance: none;
text-indent: 10px;
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
width: 100%;
background: rgb(233, 255, 170);
height: 45px;
font-family: Century Gothic;
border: none;
box-sizing: border-box;
padding-right: 60px;
}

header button {
position: absolute;
right: 10px;
top: 13.5px;
height: 43px;
width: 50px;
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
appearance: none;
border: none;
background: rgb(238, 255, 173);
border-left: 2px solid rgb(162, 193, 60);
cursor: pointer;
}

button svg {
z-index: 6;
position: absolute;
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
right: 0;
top: -1px;
}


/*
.container{
width: 100%;
margin: auto;
border: 1px solid black;
}*/

.to-do {
width: 100%;
float: left;
list-style-type: none;
box-sizing: border-box;
padding: 0;
/*border: 1px lid black;*/
}

.to-do li {
width: 85%;
background: white;
box-shadow: 0 0 5px rgb(159, 160, 155, 0.5);
min-height: 50px;
margin: auto;
border-radius: 5px;
box-sizing: border-box;
font-family: Century Gothic;
padding: 0 105px 0 25px;
position: relative;
margin-top: 25px;
display: flex;
align-items: center;
}

.to-do li .buttons {
position: absolute;
top: 0;
right: 0;
height: 50px;
width: 100px;
background: white;
}

.to-do li .buttons button {
appearance: none;
width: 47.5px;
height: 50px;
box-sizing: border-box;
position: relative;
background: white;
border: none;
cursor: pointer;
}

.to-do li .buttons button:last-of-type:before {
content: '';
width: 0.8px;
height: 29px;
background: gray;
opacity: 0.4;
float: left;
margin-left: -6px;
}


/*
.to-do li button:nth-child(1):hover .x-fill{
fill: red;
transition-duration: 0.3s;
}
.to-do li button:nth-child(2):hover .tick-fill{
fill: orange;
transition-duration: 0.3s;
}*/

.complete svg {
fill: green;
}

.complete svg:hover {
fill: orange;
transition-duration: 0.3s;
}

.remove svg {
fill: gray;
opacity: 0.8;
}

.remove svg:hover {
fill: red;
opacity: 0.7;
transition-duration: 0.3s;
}
<head>

<title>To do List App</title>

</head>

<body>
<header>
<input type="text" placeholder="Next on my to do list is...." id="input">
<button id="button-plus">
<svg width="48" height="43" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<rect fill="#0186b2" height="28" id="svg_1" stroke="#000000" stroke-opacity="0" stroke-width="5" width="4" x="19.5" y="8.5"/>
<rect fill="#47bcbc" height="3" id="svg_2" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="0" stroke-width="5" width="28" x="7.5" y="20.5"/>
</svg>

</svg>
</button>
</header>
<div class="container">
<ul id="to-do" class="to-do">
<li id="master">First to do
<div class="buttons">
<button class="remove"><!--<svg width="45" height="50" id="delete-button" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<rect fill="gray" height="28.44763" class="x-fill" id="svg_1" stroke="#000000" stroke-opacity="0" stroke-width="5" transform="rotate(39.2894 22.2822 26.8218)" width="1.49252" x="21.53592" y="12.59797"/>
<rect fill="gray" height="30.65491" class="x-fill" id="svg_2" stroke="#000000" stroke-opacity="0" stroke-width="5" transform="rotate(-45.1764 22.3317 26.664)" width="1.70493" x="21.47928" y="11.33651"/>
</svg>-->
<svg version="1.1" id="Capa_1" id="removeB" class="removeB" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 328.51 328.51" style="enable-background:new 0 0 328.51 328.51;" xml:space="preserve">
<polygon points="229.044,88.858 164.255,153.647 99.466,88.858 88.858,99.466 153.647,164.255 88.858,229.044 99.466,239.651
164.255,174.862 229.044,239.651 239.651,229.044 174.862,164.255 239.651,99.466 "/>
</svg>
</button>
<button class="complete"><!--<svg width="45" height="50" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<rect fill="#21b221" height="28.44763" class="tick-fill" id="svg_1" stroke="#000000" stroke-opacity="0" stroke-width="5" transform="rotate(39.2894 24.2822 25.8218)" width="1.49252" x="23.53592" y="11.59797"/>
<rect fill="#21b221" height="12.26151" class="tick-fill" id="svg_2" stroke="#000000" stroke-opacity="0" stroke-width="5" transform="rotate(-45.1764 11.8548 33.147)" width="1.70493" x="11.00232" y="27.0162"/>
</svg>-->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve">

<path d="M38.252,15.336l-15.369,17.29l-9.259-7.407c-0.43-0.345-1.061-0.274-1.405,0.156c-0.345,0.432-0.275,1.061,0.156,1.406
l10,8C22.559,34.928,22.78,35,23,35c0.276,0,0.551-0.114,0.748-0.336l16-18c0.367-0.412,0.33-1.045-0.083-1.411
C39.251,14.885,38.62,14.922,38.252,15.336z"/>
</svg>
</button>
</div>
</li>
</ul>
<ul id="completed" class="completed">

</ul>
</div>

</body>

关于javascript - 使 SVG 图标出现在 JS 待办事项列表项上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56894634/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com