将按钮移出容器时克隆点击中断div?

时间:2016-06-06 15:46:38

标签: javascript jquery clone

我发现这个漂亮的js小提琴,它几乎完全符合我的需要

然而,它克隆了按钮的父级和id,使得按钮与正在克隆的实际div分开。 (如果你使用删除按钮将克隆按钮放回容器中,它再次正常工作)

总之,我想完成三件事。

1。让div外的按钮被复制(1个按钮)

2. 将重复次数限制为总共6.(或任何可变变量)

3. 更新<h4>内容并将数字1更改为下一个数字。即:(1-6)

虽然我不喜欢,但我并不是很精通JS。如果有人有时间帮助我搞清楚以上内容,那就太过分了!这是我一直在玩的 JS FIDDLE

谢谢!

var regex = /^(.+?)(\d+)$/i;
var cloneIndex = $(".clonedInput").length;

function clone(){
    $(this).parents(".clonedInput").clone()
        .appendTo("body")
        .attr("id", "clonedInput" +  cloneIndex)
        .find("*")
        .each(function() {
            var id = this.id || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
            }
        })
        .on('click', 'button.clone', clone)
        .on('click', 'button.remove', remove);
    cloneIndex++;
}
function remove(){
    $(this).parents(".clonedInput").remove();
}
$("button.clone").on("click", clone);

$("button.remove").on("click", remove);

3 个答案:

答案 0 :(得分:1)

您可以选择Sub CreditUnion() Dim IE As Object, TableResults As Object, webRow As Object, charterInfo As Variant, page As Long, pageTotal As Long, r As Long Dim beginTime As Date, i As Long Set IE = CreateObject("internetexplorer.application") IE.navigate "http://mapping.ncua.gov/ResearchCreditUnion.aspx" IE.Visible = False Do While IE.Busy DoEvents Loop 'input city name into form IE.document.getelementbyid("MainContent_txtCity").Value = Worksheets(1).Range("B1").Value 'click find button IE.document.getelementbyid("MainContent_btnFind").Click beginTime = Now Application.Wait (Now + TimeValue("00:00:05")) 'total pages pageTotal = IE.document.getelementbyid("MainContent_pager_total").innertext page = 0 Do Until page = pageTotal DoEvents page = IE.document.getelementbyid("MainContent_pager_to").innertext With IE.document.getelementbyid("MainContent_grid") For r = 1 To .Rows.Length - 1 If Not IsArray(charterInfo) Then ReDim charterInfo(5, 0) As Variant Else ReDim Preserve charterInfo(5, UBound(charterInfo, 2) + 1) As Variant End If charterInfo(0, UBound(charterInfo, 2)) = .Rows(r).Cells(0).innertext Next r End With If page < pageTotal Then IE.document.getelementbyid("MainContent_pageNext").Click beginTime = Now Application.Wait (Now + TimeValue("00:00:05")) End If Loop For r = 0 To UBound(charterInfo, 2) IE.navigate "http://mapping.ncua.gov/SingleResult.aspx?ID=" & charterInfo(0, r) Do While IE.Busy DoEvents Loop 'wait 5 sec. for screen refresh beginTime = Now Application.Wait beginTime + TimeValue("0:00:05") With IE.document.getelementbyid("MainContent_newDetails") For i = 0 To .Rows.Length - 1 DoEvents Select Case .Rows(i).Cells(0).innertext Case "Credit Union Name:" charterInfo(1, r) = .Rows(i).Cells(1).innertext Case "Region:" charterInfo(2, r) = .Rows(i).Cells(1).innertext Case "Credit Union Status:" charterInfo(3, r) = .Rows(i).Cells(1).innertext Case "Assets:" charterInfo(4, r) = Replace(Replace(.Rows(i).Cells(1).innertext, ",", ""), "$", "") Case "Number of Members:" charterInfo(5, r) = Replace(.Rows(i).Cells(1).innertext, ",", "") End Select Next i End With Next r IE.Quit Set IE = Nothing 'post result on Excel cell Worksheets(1).Range("A5").Resize(UBound(charterInfo, 2) + 1, UBound(charterInfo, 1) + 1).Value = Application.Transpose(charterInfo) End Sub 的最后一次出现并克隆它,然后将其插入原始元素之后:

&#13;
&#13;
.clonedInput
&#13;
var regex = /^(.+?)(\d+)$/i;

function clone(){
    var cloneIndex = $(".clonedInput").length + 1;
    if (cloneIndex > 6) return;

    $source = $(".clonedInput").last();
    $source.clone()
        .insertAfter($source)
        .attr("id", "clonedInput" +  cloneIndex)
        .find("*")
        .each(function() {
            var id = this.id || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
            }
        })
        .on('click', 'button.remove', remove)
        .find('label').html('Learning category ' + cloneIndex + ' <span class="requiredField">*</span>');
}
function remove(){
    $(this).parents(".clonedInput").remove();
}
$("button.clone").on("click", clone);

$("button.remove").on("click", remove);
&#13;
&#13;
&#13;

答案 1 :(得分:1)

我认为以下是您要实现的目标,您必须添加另一个变量cloned_nbrclones_limit来控制克隆的div:

var cloneIndex = 1;
var clones_limit = 4;
var cloned_nbr = $(".clonedInput").length-1; //Exclude Default (first) div 

function clone()
{
  if(cloned_nbr<clones_limit)
  {
    cloneIndex++;
    cloned_nbr++;

    var new_clone =  $(".clonedInput").first().clone();

    new_clone.attr("id", "clonedInput" +  cloneIndex);
    new_clone.find(".label-nbr").text(cloneIndex);
    new_clone.find(".category").attr("id","category"+cloneIndex);
    new_clone.find(".remove").attr("id","remove"+cloneIndex);
    new_clone.on('click', 'button.clone', clone);
    new_clone.on('click', 'button.remove', remove);

    $(".clone").before(new_clone);
  }
}
function remove(){
  if(cloneIndex>1){
    $(this).parents(".clonedInput").remove();
    cloned_nbr--;
  }
}
$("button.clone").on("click", clone);

$("button.remove").on("click", remove);
body { padding: 10px;}

.clonedInput { padding: 10px; border-radius: 5px; background-color: #def; margin-bottom: 10px; }

.clonedInput div { margin: 5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clonedInput1" class="clonedInput">
  <div>
    <label for="txtCategory" class="">Learning category <span class="label-nbr">1</span><span class="requiredField">*</span></label>
    <select class="category" name="txtCategory[]" id="category1">
      <option value="">Please select</option>
    </select>
  </div>

  <div class="actions">
    <button class="remove">Remove</button>
  </div>
</div>

<button class="clone">Clone</button>

答案 2 :(得分:0)

我将plain block初始化为模板并将其用作克隆库。

HTML

<div class="box-wrap">
     <button class="clone">Clone</button>
</div>

完整演示:http://jsfiddle.net/jeafgilbert/tfFLt/1898/