Question

我有一个表单，我想记录一个练习集，然后根据需要添加新的集合。这部分工作正常，但是如果删除除最后一个之外的集合，它会抛出设置编号。

HTML：

<div class="form-group">
    <tbody class="tbodyClone">
        <tr id="clonedInput1" class="clonedInput">
            <td><h4 name="set" class="heading-reference">Set 1</h4>
              <select id="style" class="form-control">
                <option>Pull ups</option>
                <option>Push ups</option>
            </select></td>
            <td><select id="weight" class="form-control">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select></td>
            <td><select id="reps" class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                                                                   </select></td>
            <td>
                <button id="btnAdd_0" name="btnAdd_0" type="button" class="clone btn btn-success"><i class="fa fa-plus-circle"></i></button>
                <button id="btnDel_0" name="btnDel_0" type="button" class="remove btn btn-danger"><i class="fa fa-trash-o"></i></button>
            </td>
        </tr>
    </tbody>
</table>

JavaScript的：

var regex = /^(.*)(\d)+$/i;

var cloneIndex = $(".clonedInput").length;
if ($(".clonedInput").length == 1) {
    $('.remove').hide();
} else {
    $('.remove').show();
}
function clone() {
     cloneIndex++;

    $(this).parents(".clonedInput").clone()
        .appendTo(".tbodyClone")
        .attr("id", "clonedInput" + cloneIndex)
        .find(".heading-reference").text('Set ' + cloneIndex)
        .on('click', 'clone', clone)
        .on('click', 'remove', remove);


    //delete
    console.log("Total lines => " + $(".clonedInput").length);

    if ($(".clonedInput").length == 1) {
        $('.remove').hide();
    } else {
        $('.remove').show();
    }

}
function remove() {
    $(this).parents(".clonedInput").remove();

    cloneIndex--;

    if ($(".clonedInput").length == 1) {
        $('.remove').hide();
    } else {
        $('.remove').show();
    }

}
$(document).on("click", ".clone", clone);
$(document).on("click", ".remove", remove);

即使某个集被删除，有没有办法可以按顺序保留设定的数字？

Answer 1

将此功能合并到现有代码中最简单的方法是在删除之后重构所有后续行的ID。

function remove() {
  var toRemove = $(this).closest(".clonedInput");
  // which ID are we removing?
  var removedId = parseInt(toRemove.attr('id').replace("clonedInput",""));

  // .nextAll will take all following siblings, that match the selector.
  // this avoids reassigning IDs to entries in front of the removed one...
  // ...since they don't change anyway
  toRemove.nextAll('.clonedInput').each(function(){
    $(this).attr('id', "clonedInput"+(removedId)).find(".heading-reference").text('Set ' + removedId)
    removedId++;
  });
  toRemove.remove();

  cloneIndex--;

  if ($(".clonedInput").length == 1) {
      $('.remove').hide();
  } else {
      $('.remove').show();
  }
}

没有测试此代码，所以如果出现任何问题，请告诉我。

Answer 2

jQuery的.index()为您提供匹配元素的索引。

请注意，您不希望克隆元素中的ID而不更改它们 - id在整个页面上应该是唯一的。我没有删除片段中的所有内容。

function fixVisibility()
{
    // or just do this in css
    if ($(".clonedInput").length == 1) {
        $('.remove').hide();
    } else {
        $('.remove').show();
    }
}

function fixIndices()
{
  // if you delete an item on top, the indices should be fixed.
  $('.clonedInput').each(function(){
    var tr = $(this);
    var cloneIndex = tr.index() + 1;
    tr.removeAttr('id')
        .attr("id", "clonedInput" + cloneIndex)
        .find(".heading-reference").text('Set ' + cloneIndex).end();
  });
}

function clone()
{
    var tr = $(this).closest(".clonedInput");
    var cloneIndex = tr.index() + 2;
  
    tr.clone().removeAttr('id')
        .attr("id", "clonedInput" + cloneIndex)
        .find(".heading-reference").text('Set ' + cloneIndex).end()
        .appendTo('.tbodyClone');
  
    fixVisibility();


    //delete
    console.log("Total lines => " + $(".clonedInput").length);

}

function remove() {
    $(this).parents(".clonedInput").remove();

    fixVisibility();
    fixIndices();
}

fixVisibility();
$(document).on("click", ".clone", clone);
$(document).on("click", ".remove", remove);

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="form-group">
    <tbody class="tbodyClone">
        <tr id="clonedInput1" class="clonedInput">
            <td><h4 name="set" class="heading-reference">Set 1</h4>
              <select id="style" class="form-control">
                <option>Pull ups</option>
                <option>Push ups</option>
            </select></td>
            <td><select id="weight" class="form-control">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select></td>
            <td><select id="reps" class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select></td>
            <td>
                <button class="clone btn btn-success"><i class="fa fa-plus-circle"></i></button>
                <button class="remove btn btn-danger"><i class="fa fa-trash-o"></i></button>
            </td>
        </tr>
    </tbody>
</table>

索引编号为

2 个答案: