javascript - 为什么使用 addClass 时类名没有在 DOM 中更新？

Question

我正在关注 Jon Duckett 写的《Javascript & jQuery》一书。在其中，我试图重新创建 this example project .

不起作用的部分是:(我的代码)

功能。更新计数器:

var updateCounter = function(){
  var itemCount = $('ul li[class!=complete]').length;
  $('#counter').text(itemCount);
}
updateCounter();

功能。检查项目是否完整:

var comp = function(){
  var clickedItem = $(this)
  if(clickedItem.hasClass('complete')){
    clickedItem.animate({
      opacity: 0.0
    }, 500, 'swing', function(){
      clickedItem.remove();
    });
  }
  else{
    $(this).addClass('complete');
    var removedItem = $(this).clone();
    $(this).remove();
    list.append(removedItem); 
  }
  updateCounter();
}

功能。添加新项目:

var addNewItem = function(e){
  e.preventDefault();
  var firstComplete = $('ul>.complete').first();
  var newItem = $('#itemDescription:input:text').val();
  if (firstComplete.length !==0){
    firstComplete.before('<li>' + newItem + '</li>');
    hideFormControls();
  }
  else{
    list.append('<li>' + newItem + '</li>');
    hideFormControls();
  }
  updateCounter();
}

我的方式和书本的区别在于，当向列表中添加新项目时，书本会输出

list.append('<li class=\"complete\">' + newItem + '</li>')

而我使用addClass。这样做不会更新计数器(它会更新，但会减少一)。我尝试将事件处理程序添加到列表中:

$('ul').on('DOMSubtreeModified', updateCounter); 

Answer 1

它无法正确更新，因为您在删除元素之前对元素进行计数。动画是异步的。

clickedItem.animate({  //this is asynchronous
    opacity: 0.0
  }, 500, 'swing', function(){ //this is called after updateCounter() was called
    clickedItem.remove();
    updateCounter();  //count after it is removed
  });