Question

我正在制作待办事项列表应用。当用户点击复选标记以添加课程.done时，<span>中的文字应显示为灰色，并且复选标记应填写并变为黑色。如果他们取消选中它，文本应该返回黑色并且复选标记为未选中状态。

这有效直到有多个项目，然后它的工作方式不一致。有时检查标记在选中时不会执行任何操作，有时文本会保持灰色，但复选标记将返回未选中状态。我是jQuery的初学者（当你看到我的代码时我肯定会很明显），这是我在这里发表的第一篇文章。我搜索过，我找不到我没有尝试过的信息。我尝试确保在添加新类之前删除了类。

这是js：

$(".checkmark").on("click", function() {
      // alert($(this));

      if ($(this).attr('data-icon') == '\ue603') {
        $(this).attr('data-icon', '\ue600').removeClass("notdone").addClass("done")
      }
      else {
        $(this).attr('data-icon', '\ue603').removeClass("done").addClass("notdone")
      };

      if ($("span.checkmark").is(".done")) {
        // $("#list").prev(".list_item").addClass("grayedout")
        $(this).next().addClass("grayedout")
        // alert(this);
       }
       else {
        $(this).next().removeClass("grayedout")
       };

    });

    $(".delete").on("click", function() {
        // alert("delete me!");
        $(this).closest("li").remove();
      });

 });
    var addItems =function(e) {
          e.preventDefault();

        //make sure the input isn't blank
        if($("#item").val()=='') {
            alert("please enter some sh!t to get done");
          }

        else {
          //add list item 
          $("#list ul").append('<li><span aria-hidden="true" data-icon= '+ uncheck +' class="checkmark"></span><span class="list_item">'+ $('#item').val() + '</span><span aria-hidden="true" data-icon="&#xe601;" class="delete"></span></li>');              
          // clear input box
          $("#item").val("");
           };
    };

以下是该页面的链接：http://eak000.github.io/todo/ 提前感谢您的帮助。

Answer 1

问题在于

行

if ($("span.checkmark").is(".done")) {

它检查第一个checkmark元素是否具有类done，而您需要检查当前点击的checkmark是否具有类done所以

if ($(this).is(".done")) {
//or if ($(this).hasClass("done")) {

您在添加点击处理程序的方式上有另一个问题，您在另一个点击处理程序（添加按钮）中添加了点击处理程序，这也可能导致问题。

您可能已经这样做的原因是处理动态元素，但解决方案是使用event delegation，因此不要在$("#item").on("keypress", function(e) {处理程序中添加单击处理程序，而是尝试在下面添加dom ready handler

$('.list').on("click", '.checkmark', function () {
    // alert($(this));

    var isDone = $(this).hasClass("done");
    $(this).attr('data-icon', isDone ? '\ue600' : '\ue603').toggleClass("notdone", isDone).toggleClass("done", !isDone)

    $(this).next().toggleClass("grayedout", !isDone)

});

$('.list').on("click", '.delete', function () {
    // alert("delete me!");
    $(this).closest("li").remove();
});

jquery添加和删除类工作不一致

1 个答案: