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

Question

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

我正在使用 length 来捕获父级中 div 的数量。这很好用。但是当我 fadeout(删除)dom 中的一个元素时，计数器/长度不会改变。当我 clone 元素到完成的选项卡时也不会。

这是我设置的 jsfiddle 文件。

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

这是我的 jQuery

$(document).foundation();

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

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

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

    $('#panel1').each(function() { 

        var n = $(this).children('.saved-tip').length;
        $(".tab-title:first a").text("Saved (" + n + ")");

    });


    $('#panel2').each(function() { 

        var n = $(this).children('.saved-tip').length;
        $(".tab-title:last a").text("Completed (" + n + ")");

    });

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>