代码之家 › 专栏 › 技术社区 › Emily K

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

addclass jquery

Emily K · 技术社区 · 11 年前

我正在制作待办事项列表应用程序。当用户单击选中标记添加类时 .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/ 提前感谢您的帮助。

1 回复 | 直到 11 年前

Arun P Johny 11 年前

问题是线路

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

它检查第一个 checkmark 元素具有类 done ,您需要检查当前是否已单击 复选标记 有这个班 完成 所以

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

您在添加单击处理程序时遇到了另一个问题,您正在将单击处理程序添加到另一个单击处理程序(添加按钮)中,这也可能导致问题。

您这样做的原因可能是为了处理动态元素,但解决方案是使用 event delegation ,因此不是在 $("#item").on("keypress", function(e) { 处理程序尝试在dom就绪处理程序中添加以下内容

$('.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();
});