gpt4 book ai didi

javascript - 如何在单击时将新的 UI 元素添加到列表中?

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

我需要创建以下名为“类别”的面板每次用户单击“+新类别”链接时,
添加了一个新的文本框矩形,用户可以在其中输入类别。对于每个添加的类别,侧面都会标出一个有序编号。

目前这是我的代码:

HTML:

<div class="row">
<div class="col-lg-3">
<section class="panel">
<header class="panel-heading">
<h2 class="panel-title">Categories</h2>
<a class="new-category" href="#add-new-app-category">+ New Category</a>
</header>
</section>
</div>
</div> <!-- END <div class="row"> -->

CSS:

.panel {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
}

.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
/* border-radius: 4px;*/
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
/* overflow-y: auto;*/
width:431px;
}


.panel-heading {
background: #fdfdfd;
/* border-radius: 5px 5px 0 0;*/
/* border-bottom: 1px solid #DADADA;*/
/* padding: 18px;*/
position: relative;
}

.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 22px;
color: #2baab1;
font-family:'Lato', sans-serif;
display:inline-block;
}

.panel-body {
background: #fdfdfd;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
/* border-radius: 5px;*/
}


.panel-body {
padding: 15px;
}


.new-category {
float:right;
margin-top:5px;
text-decoration:none;
}

.new-category:link , .new-category:visited, .new-category:hover{
text-decoration:none;
}

jsfiddle 链接:https://jsfiddle.net/kzc024vq/2/

每次用户单击“+新类别”链接时,都会显示新的有序文本框应添加 UI 元素,如下图所示:

enter image description here

此外,我还需要什么:

  1. 我需要添加删除列表中类别的可能性单击该特定文本框的“x”

  2. 我可以单击它并将其拖动到列表的其他元素上。

最佳答案

您必须使用.append()将新元素添加到html容器中,并使用.remove()删除特定元素。您可以使用单击事件来添加和删除元素。

示例:

$( ".new-category" ).click(function() {
$( '#container' ).append('<div>new category <a class="close-category" href="#">x</a></div>');
});

$( "#container" ).on( "click", ".close-category", function( event ) {
$( this).parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="container">
<div class="col-lg-3">
<section class="panel">
<header class="panel-heading">
<h2 class="panel-title">Categories</h2>
<a class="new-category" href="#add-new-app-category">+ New Category</a>
</header>
</section>
</div>
</div> <!-- END <div class="row"> -->

追加新类别时需要使用委托(delegate)事件来更新事件,因为新对象不会继承事件。

$( "#container" ).on( "click", ".close-category", function( event ) {
$( this).parent().remove();
});

关于javascript - 如何在单击时将新的 UI 元素添加到列表中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36314475/

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