从dom中删除元素时如何更改计数器/长度

Question

我正在开发一个已经保存过的小部件＆＃39;并且＆＃39;已完成＆＃39;模块。当我删除元素时，它会从dom中删除/淡化它，但当我将其标记为已完成时，将其克隆到已完成的选项卡。这工作很棒，但顶部括号内的数字不适合我。这样做的更好方法是什么？我可能在想这个。

我正在使用async delegate来捕获父级内length的数量。这很好用。但是当我div（删除）dom中的元素时，计数器/长度不会改变。当我fadeout元素到完成的标签时也是如此。

这是我设置的jsfiddle文件。

http://jsfiddle.net/breezy/jvdnbw4q/

这是我的jQuery

clone

Answer 1

您需要调用事件处理程序内部的计数逻辑以进行标记和删除。

// Tabs
$(document).foundation();

$('.removed-saved-tip').click(function (e) {
    $(this).closest('.saved-tip').addClass('removed').fadeOut();
    e.preventDefault();
    updateCount();
});

$('.saved-tip-done').click(function (e) {
    $(this).toggleClass('marked-done');
    e.preventDefault();
    $(this).closest('.saved-tip').clone().appendTo('#panel2');
    updateCount();
});

updateCount();
function updateCount() {
    $('#panel1').each(function () {
        var n = $(this).children('.saved-tip').filter(function() {
            return !$(this).hasClass('removed');
        }).length;
        $(".tab-title:first a").text("Saved (" + n + ")");
    });

    $('#panel2').each(function () {
        var n = $(this).children('.saved-tip').filter(function() {
            return !$(this).hasClass('removed');
        }).length;
        $(".tab-title:last a").text("Completed (" + n + ")");
    });
}

.tabs-content {
  margin: 10px auto 0 auto;
}
.tabs-content .content {
  background: #fff;
}
.print-option {
  background: #fbf7cc;
  padding: 5px 15px;
  margin: 0;
}
.print-option h4 {
  font-size: 14px;
}
.saved-tip {
  padding: 10px 15px;
  overflow: hidden;
  cursor: pointer;
}
.saved-tip:hover {
  background: #efefef;
}
.saved-tip .saved-tip-icon {
  float: left;
  margin: 0 10px 0 0;
}
.saved-tip h5 {
  color: #107CB2;
  font-size: 13px;
  float: left;
}
.saved-tip .saved-tip-options {
  float: right;
}
.saved-tip .saved-tip-options a {
  color: #676767;
  padding: 0 5px;
  border: 1px solid #dedede;
  border-radius: 3px;
  display: inline-block;
}
.saved-tip .saved-tip-options i {
  font-size: 14px;
}
.saved-tip a.marked-done {
  color: #107CB2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation/foundation.tab.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css" />

<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Saved</a>
  </li>
  <li class="tab-title"><a href="#panel2">Completed</a>
  </li>
</ul>
<div class="tabs-content">
  <div class="print-option">
    <h4>Share these tips with your home. <a href="#">Print now</a></h4>

  </div>
  <div class="content active" id="panel1">
    <div class="saved-tip">
      <img class="saved-tip-icon" src="http://placehold.it/20x20">
      <h5>Tip title</h5>

      <div class="saved-tip-options">	<a class="saved-tip-done" href="#"><i class="fa fa-check"></i></a>
        <a class="removed-saved-tip" href="#"><i class="fa fa-times"></i></a>

      </div>
    </div>
    <div class="saved-tip">
      <img class="saved-tip-icon" src="http://placehold.it/20x20">
      <h5>Tip title</h5>

      <div class="saved-tip-options">	<a class="saved-tip-done" href="#"><i class="fa fa-check"></i></a>
        <a class="removed-saved-tip" href="#"><i class="fa fa-times"></i></a>

      </div>
    </div>
  </div>
  <!-- eo / panel1 -->
  <div class="content" id="panel2">
    <div class="saved-tip">
      <img class="saved-tip-icon" src="http://placehold.it/20x20">
      <h5>Tip title</h5>

      <div class="saved-tip-options">	<a class="saved-tip-done" href="#"><i class="fa fa-check"></i></a>
        <a class="removed-saved-tip" href="#"><i class="fa fa-times"></i></a>

      </div>
    </div>
    <div class="saved-tip">
      <img class="saved-tip-icon" src="http://placehold.it/20x20">
      <h5>Tip title</h5>

      <div class="saved-tip-options">	<a class="saved-tip-done" href="#"><i class="fa fa-check"></i></a>
        <a class="removed-saved-tip" href="#"><i class="fa fa-times"></i></a>

      </div>
    </div>
    <div class="saved-tip">
      <img class="saved-tip-icon" src="http://placehold.it/20x20">
      <h5>Tip title</h5>

      <div class="saved-tip-options">	<a class="saved-tip-done" href="#"><i class="fa fa-check"></i></a>
        <a class="removed-saved-tip" href="#"><i class="fa fa-times"></i></a>

      </div>
    </div>
  </div>
  <!-- eo / panel2 -->
</div>
<!-- eo // tabs content -->
</div>

Answer 2

您需要将每个功能放入点击功能，因为现在您的代码只有在文档准备就绪时才会调用。

$('.saved-tip-done').click(function (e) {

    $(this).toggleClass('marked-done');
    e.preventDefault();
    $(this).closest('.saved-tip').clone().appendTo('#panel2');
    $(".tab-title:first a").text("Saved (" + $('#panel1 .saved-tip').length+")");
    $(".tab-title:last a").text("Saved (" + $('#panel2 .saved-tip').length+")");
});

您可以使用$('#panel1 .saved-tip').length

删除每个并在一行中获取保存提示的数量

http://jsfiddle.net/jvdnbw4q/1/

Answer 3

如果您要继续使用该项目，那么转移到特定的MVVM（或MV *）框架并完全避免手动DOM操作可能更合理。

以下是使用Vue.js的简单示例，但您可以使用或多或少的任何内容 - 这样做的目的是减少手工劳动并专注于功能。
注意代码如何不包含任何DOM操作，这完全由框架来处理。

var v = new Vue({
  el: 'body',
  data: {
    items: []
  },
  computed: {
    doneItems: function() {
      return this.items.filter(function(item) {
        return item.done;
      });
    }
  },
  methods: {
    addItem: function() {
      var value = ("" || this.input).trim();
      if (!value.length) return;
      this.items.push({
        title: value,
        done: false
      });
      this.input = '';
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.12/vue.min.js"></script>
<input autofocus placeholder="Add a new item" v-model="input" v-on="keyup:addItem | key 'enter'">
<p>All items ({{items.length}}):</p>
<ul v-repeat="items">
  <li>{{title}}
    <input type="checkbox" v-model="done" />
  </li>
</ul>
<p>Done items({{doneItems.length}}):</p>
<ul v-repeat="doneItems">
  <li>{{title}}
    <input type="checkbox" v-model="done" />
  </li>
</ul>