Question

我关注Javascript＆amp; Jon Duckett的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
  });

使用addClass时，为什么不在DOM中更新类名？

1 个答案: