Javascript 如何在jquery中添加一个或多个克隆_Javascript_Jquery

Javascript 如何在jquery中添加一个或多个克隆

javascript jquery

Javascript 如何在jquery中添加一个或多个克隆,javascript,jquery,Javascript,Jquery,我是jquery新手，我使用的是laravel框架。我想在用户填写第一个课程后添加课程当用户单击“添加更多课程”按钮时，它将创建新的克隆。请确保“添加更多课程”按钮将从第一个课程中删除并设置为第二个课程，并且相同的“应用于新创建的课程”和“添加更多课程”按钮将从第二个课程中删除并设置为第三个课程。我有hrml代码 enter code here <div class="col-md-12 col-sm-12 col-xs-12"> <div class=

我是jquery新手，我使用的是laravel框架。我想在用户填写第一个课程后添加课程

当用户单击“添加更多课程”按钮时，它将创建新的克隆。请确保“添加更多课程”按钮将从第一个课程中删除并设置为第二个课程，并且相同的“应用于新创建的课程”和“添加更多课程”按钮将从第二个课程中删除并设置为第三个课程。我有hrml代码

enter code here
<div class="col-md-12 col-sm-12 col-xs-12">
           <div class="row">
              <div class="heading">
                <h4>Courses Offred <button type="button" class="close" data-dismiss="modal"  aria-hidden="true" style="display:none">&times;</button></h4>
                 <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Course  Title</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div> 
                  <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Fees</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div> 
                  <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Web Link</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div> 
                  <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Course Detail</span>
                         <textarea  class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Course Detail"></textarea>
                     </div>
                 </div> 
                  <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Course Type</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div>  
                 <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Course Duration</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div>
                 <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Location</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div>
                 <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Entry Requirement</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div>
                 <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Certificates</span>
                         <textarea  class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Certificates"></textarea>
                     </div>
                 </div>
                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="row">
                       <div class="add-more-class ">
                          <div class="btn-save">
                            <button class="btn btn-info">Add More Course</button>
                          </div>
                       </div>
                    </div>
                 </div>                       
              </div>
           </div>
        </div>

在此处输入代码
《红色与时代》课程；
课程名称
费用
网络链接
课程详情
课程类型
课程时长
位置
入学要求
证书
添加更多课程

在标题标签中有关闭按钮。它应该在第二个课程中可见，并使验证用户不能添加超过五个课程。有人能帮我吗。提前感谢：）

您可以从以下代码获得帮助

jQuery(document).delegate('a.add-record', 'click', function(e) {
     e.preventDefault();    
     var content = jQuery('#sample_table tr'),
     size = jQuery('#tbl_posts >tbody >tr').length + 1,
     element = null,    
     element = content.clone();
     element.attr('id', 'rec-'+size);
     element.find('.delete-record').attr('data-id', size);
     element.appendTo('#tbl_posts_body');
     element.find('.sn').html(size);
   });

单击AddMore按钮，您需要创建父div的第一种形式的克隆，并附加容器

您可以从以下代码获得帮助

jQuery(document).delegate('a.add-record', 'click', function(e) {
     e.preventDefault();    
     var content = jQuery('#sample_table tr'),
     size = jQuery('#tbl_posts >tbody >tr').length + 1,
     element = null,    
     element = content.clone();
     element.attr('id', 'rec-'+size);
     element.find('.delete-record').attr('data-id', size);
     element.appendTo('#tbl_posts_body');
     element.find('.sn').html(size);
   });

单击AddMore按钮，您需要创建父div的第一种形式的克隆，并附加容器

我想这就是您想要的脚本：

更新脚本：

var courseCtr = 1;
console.log('course counter: ' + courseCtr);
$(document).on('click', 'button.btn', function() {

    if (courseCtr === 5) {
        return false;
    }

    var $row = $(this).closest('div.heading').parent();
    var $parent = $row.parent();
    var $clone = $row.clone();
    if ($clone.find('.heading .close').length === 1) {
        $clone.find('.heading .close').remove();
    }
    $clone.find('.heading h4').after('<button class="close">X</button>')
    $clone.find(':input').val('');
    $clone.find('textarea').val('');
    $row.find('.heading div').last().remove();

  //  $clone.find('.heading h4').remove();

    $parent.append($clone);
    courseCtr++;
    console.log('course counter: ' + courseCtr);
})

$(document).on('click', '.close', function(){
    var $buttonClone = $(this).parent().find('div').last().clone();
    $(this).parents('.row').prev().find('div.heading').append($buttonClone);
    $(this).parents('.row').remove();
    courseCtr--;
    console.log('course counter: ' + courseCtr);
})

var-courspectr=1；
console.log（'course counter:'+courseCtr）；
$（document）.on（'click'，'button.btn'，function（）{
如果（courseCtr==5）{
返回false；
}
var$row=$（this）.closest（'div.heading'）.parent（）；
var$parent=$row.parent（）；
var$clone=$row.clone（）；
if（$clone.find（'.heading.close'）。长度==1）{
$clone.find（'.heading.close'）.remove（）；
}
$clone.find（'.heading h4'）。在（'X'之后）
$clone.find（':input'）.val（''）；
$clone.find（'textarea'）.val（''）；
$row.find（'.heading div'）.last（）.remove（）；
//$clone.find（'.heading h4'）.remove（）；
$parent.append（$clone）；
courseCtr++；
console.log（'course counter:'+courseCtr）；
})
$（文档）.on（'click'，'.close'，函数（）{
var$buttonClone=$（this.parent（）.find（'div'）.last（）.clone（）；
$（this）.parents（'.row'）.prev（）.find（'div.heading'）.append（$buttonClone）；
$（this.parents（'.row'）.remove（）；
courseCtr--；
console.log（'course counter:'+courseCtr）；
})

更新的FIDDLE:

我想这就是您想要的脚本：

更新脚本：

var courseCtr = 1;
console.log('course counter: ' + courseCtr);
$(document).on('click', 'button.btn', function() {

    if (courseCtr === 5) {
        return false;
    }

    var $row = $(this).closest('div.heading').parent();
    var $parent = $row.parent();
    var $clone = $row.clone();
    if ($clone.find('.heading .close').length === 1) {
        $clone.find('.heading .close').remove();
    }
    $clone.find('.heading h4').after('<button class="close">X</button>')
    $clone.find(':input').val('');
    $clone.find('textarea').val('');
    $row.find('.heading div').last().remove();

  //  $clone.find('.heading h4').remove();

    $parent.append($clone);
    courseCtr++;
    console.log('course counter: ' + courseCtr);
})

$(document).on('click', '.close', function(){
    var $buttonClone = $(this).parent().find('div').last().clone();
    $(this).parents('.row').prev().find('div.heading').append($buttonClone);
    $(this).parents('.row').remove();
    courseCtr--;
    console.log('course counter: ' + courseCtr);
})

var-courspectr=1；
console.log（'course counter:'+courseCtr）；
$（document）.on（'click'，'button.btn'，function（）{
如果（courseCtr==5）{
返回false；
}
var$row=$（this）.closest（'div.heading'）.parent（）；
var$parent=$row.parent（）；
var$clone=$row.clone（）；
if（$clone.find（'.heading.close'）。长度==1）{
$clone.find（'.heading.close'）.remove（）；
}
$clone.find（'.heading h4'）。在（'X'之后）
$clone.find（':input'）.val（''）；
$clone.find（'textarea'）.val（''）；
$row.find（'.heading div'）.last（）.remove（）；
//$clone.find（'.heading h4'）.remove（）；
$parent.append（$clone）；
courseCtr++；
console.log（'course counter:'+courseCtr）；
})
$（文档）.on（'click'，'.close'，函数（）{
var$buttonClone=$（this.parent（）.find（'div'）.last（）.clone（）；
$（this）.parents（'.row'）.prev（）.find（'div.heading'）.append（$buttonClone）；
$（this.parents（'.row'）.remove（）；
courseCtr--；
console.log（'course counter:'+courseCtr）；
})

更新的FIDDLE:

我认为您需要稍微清理一下html标记，这样您的工作和代码将更容易理解。 1-将“添加更多课程”按钮与表单内容分开。 2-给出适当的类别以形成容器。 3-编写一个简单的代码并完成

修改的HTML代码


课程取消
课程名称
费用
网络链接
课程详情
课程类型
课程时长
位置
入学要求
证书