Question

我能够在按钮点击时动态创建字段集。让我说第一次点击按钮它创建定义1然后定义2然后定义3等。每个字段集都有X标记，用于删除动态创建的字段集（如果是偶然创建的）。我想要做的是例如定义2字段集被删除然后定义3应该说定义2。我需要知道的是当我在一个字段集中单击X标记时，从下一个字段集中获取图例的值并将其更改为已删除的字段的值。

以下是我的动态调用：

    if($(".addDef").length > 0){
                    i++;
                }else{
                    i = 2;
                }
    $(".definitionBlock").append("<fieldset><legend class='addDef'>Definition #"+ i +"</legend><div class='removeDef'><span>&#10006;</span></div>
    </fieldset>");

谢谢！

Answer 1

您可以使用.text(function(index, text){})将.textContent的数字部分替换为集合中元素的索引

var n = 2;

$(".addDefBtn").on("click", function() {
  if (!$(".addDef").length) {
    n = 2;
  }
  $(".mvnDefinitionBlock").append("<fieldset class='addDef'><legend class='addDefTitle'>Definition #" + n++ + "</legend><div class='removeDef'><span>&#10006;click</span></div></fieldset>");
});

$('body').on('click', '.removeDef', function() {

  $(this).closest('fieldset').remove();
  n = 2;
  $(".addDef legend").text(function(index, text) {
    return text.replace(/\d+/, n++);
  });
});

.removeDef {
  float: right;
  margin-top: -20px;
  font-size: 13px;
  color: red;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<a href="#" class="addDefBtn">Add New Definition</a>
<div class="mvnDefinitionBlock"></div>

在单击前一个字段集时从后续字段集获取值

1 个答案: