Question

我需要创建以下面板，名为＆＃34; Categories＆＃34; 每次用户点击＆＃34; +新类别＆＃34;链接，
添加了一个新的文本框矩形，用户可以在其上输入类别。对于每个添加的类别，在侧面表示有序编号。

目前这是我的代码：

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/

每次用户点击＆＃34; +新类别＆＃34;链接，新的有序文本框应添加UI元素，如下图所示：

此外，我还要求：

我需要添加删除列表中类别的可能性点击＆＃34; x＆＃34;该特定文本框
我可以点击并将其拖动到列表的其他元素上。

Answer 1

您必须使用.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();
    });

Answer 2

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();
});

如何在单击时将新UI元素添加到列表中？

HTML：

CSS：

2 个答案: