javascript - 在元素单击上使用 jquery 更改 html 文本的 id 和类

Question

这是我的情况:

<div id="div1" class="divPhase">
    <div class="row margin-top-1">
        <div class="column">
            <label>Title Phase 1:</label>
            <textarea id="title-1" name="title-phase-1" rows="6" required></textarea>
        </div>
        <div class="column">
            <label>Description Phase 1:</label>
            <textarea id="description-1" name="description-phase-1" rows="6" required></textarea>
        </div>
        <a class="removeLink">Remove div1</a>
    </div>
</div>
<div id="div2" class="divPhase">
    <div class="row margin-top-2">
        <div class="column">
            <label>Title Phase 2:</label>
            <textarea id="title-2" name="title-phase-2" rows="6" required></textarea>
        </div>
        <div class="column">
            <label>Description Phase 2:</label>
            <textarea id="description-2" name="description-phase-2" rows="6" required></textarea>
        </div>
        <a class="removeLink">Remove div2</a>
    </div>
</div>
....
....
and so on with div3, div4 etc.

如您所见，对于每个 div(div1、div2、div3 等)，我都有一个链接，该链接将删除其父 div 具有类 divPhase。

这是代码:

$(".removeLink").closest(".divPhase").remove();

我想要实现的是即使在删除一些 div 后也能获得一个升序且连续的 div 列表。

我会尽量说得更清楚。到目前为止，如果我有 5 个 div(如上面的那样)(具有这些 id:div1、div2、div3、div4 和 div5) 如果我通过点击类 removeLink 的链接删除 div3 我得到的是一个列表4 个 div(div1、div2、div4 和 div5)。

此列表不连续，因为在 div2 和 div4 之间我们需要 div3。我想要得到的是 div1、div2、div3、div4 (div4 code> 应该变成 div3 并且 div5 应该变成)。

此外，我应该对文本区域的 id 实现相同的效果(title-5 和 description-5 应该变为 title-4 和 description-4 而 title-4 和 description-4 应变为 title-3 和 description-3)。

我该如何解决这个问题？

Answer 1

这里有一个更优雅的方法:当 .divPhase 时触发事件被删除( remove-row )，并附加 updateIndexes聆听它。在此函数的主体中，您可以在所有 .divPhase 的循环中更改您喜欢的任何属性。的。

注意: 虽然下面的代码片段适用于此用例，但如果您发现自己经常需要为每个元素/属性添加额外的修改，您可能需要考虑数据-first/template渲染方案，如Handlebars或Mustache ，有关完整列表，请参阅 javascripting.com

var removeEntry = function() {
  $('#rows').trigger('remove-row', [$(this).closest('.row').index()]);
  $(this).closest('.row').remove();
};

var updateIndexes = function(e, index) {
  var selector = ':input, .divPhase';
  $('#rows').children().filter(function(i) {
    return i > index;
  }).each(function(i) {
    $(this).find(selector).add(this).each(function() {
      var displayIndex = (i + 1);
      if (this.className && this.className.length)
        this.className = this.className.slice(0, -1) + displayIndex;
      if (this.id && this.id.length)
        this.id = this.id.slice(0, -1) + displayIndex;
      if (this.name && this.name.length)
        this.name = this.name.slice(0, -1) + displayIndex;
      if (this.value && this.value.length)
        this.value = this.value.slice(0, -1) + displayIndex;
    });
  });
};

$('#rows').on('remove-row', updateIndexes);
$('.row a').on('click', removeEntry);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rows">
  <div class="row divPhase-1">
    <input type="text" name="title-1" id="title-1" value="value-1">
    <textarea name="desc-1" id="desc-1"></textarea>
    <a href="#desc-1-removed">Remove</a>
  </div>
  <div class="row divPhase-2">
    <input type="text" name="title-2" id="title-2" value="value-2">
    <textarea name="desc-2" id="desc-2"></textarea>
    <a href="#desc-2-removed">Remove</a>
  </div>
</div>