[英]How can I add new UI Elements to a list on click?
我需要創建以下名為“Categories”的面板,每次用戶點擊“+New Category”鏈接時,
添加了一個新的文本框矩形,用戶可以在其中輸入類別。 對於每個添加的類別,旁邊都標有一個有序編號。
目前這是我的代碼:
<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"> -->
.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 元素,如下圖所示:
此外,我還需要什么:
我需要通過單擊該特定文本框的“x”來添加刪除列表中類別的可能性
我可以單擊並將其拖到列表的其他元素上。
您必須使用.append()
將新元素添加到 html 容器中,並使用.remove()
刪除特定元素。 您可以使用 click 事件來使用添加和刪除元素。
例子:
$( ".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"> -->
當您追加新類別時,您需要使用委托事件來更新事件,因為新對象不繼承該事件。
$( "#container" ).on( "click", ".close-category", function( event ) {
$( this).parent().remove();
});
function createCategory(){
var htmlStr = '<h2 class="panel-title">Categories</h2>
<a class="new-category"href="#add-new-app-category">+ New Category</a>'
$('#yourWrapperDiv').append(htmlStr);
}
和 HTML 方面:
<a id="newCategory" onclick="createCategory()">new category</a>
http://www.w3schools.com/jquery/html_append.asp
如果您想為新類別賦予自己的名稱,您需要添加一個輸入字段來輸入名稱,或者您需要生成唯一的 ID。
如果您不希望將點擊處理程序寫入 html 端,您也可以這樣做:
$('#newCategoryLink').click(function(){
createCategory();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.