jquery之jQuery中点击时元素总数自动减一_编程设计

我试图有一个计数器显示未完成的任务总数。单击时，完整的内容会被划线标记。当我单击每个列表时，总数也应该减少 1。我创建了一个代表总数的变量 - 1，但总数仅在第一次单击时减少一次。拜托，我被这些困住了，而且我对 jQuery 还很陌生。

这是我的代码

$(document).ready(function() { 
  $('button').on('click', function() { 
    // Create variable to represent the value 
    var $value = $('input').val() 
 
    // Putting the values as list in web browser using if and else. 
    if ($value === "") { 
      alert("Enter your to do list") 
    } else { 
      $('.list').append("<li>" + $value + "</li>") 
    } 
 
    //Creating variable that will hold totoal number of list 
    var $count = $('li').length; 
 
    // Creating variable to repersent list subtraction 
    var $sub = $count - 1; 
    var $solution = $sub--; 
 
    // Underline the list when cliked by user 
    $('li').on("click", function() { 
      $(this).css('text-decoration', 'line-through') 
 
      $('.text').text("You have " + $solution + " uncompleted tasks") 
    }); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!DOCTYPE html> 
<html> 
 
<head> 
  <title>J-query Test</title> 
  <style> 
    h2 { 
      text-align: center; 
    } 
     
    body { 
      margin: 0; 
      padding: 15px 0 0 15px; 
      border-collapse: none; 
    } 
     
    li { 
      font-size: 20px; 
      font-family: 'candara'; 
    } 
  </style> 
</head> 
 
<body> 
  <p>Write down your to do list</p> 
  <input type="text" name="list"> 
  <button>Click</button> 
  <ul class="list"> 
    <li>To do list</li> 
    <li>To do list</li> 
    <li>To do list</li> 
    <li>To do list</li> 
  </ul> 
  <div class="text"> 
 
  </div> 
</body> 
 
</html>

请您参考如下方法:

您可以使用类line来实现您所需要的。避免嵌套点击事件，查看示例:

$(document).ready(function() { 
 
    var $count; 
    var $sub; 
   
    $('button').on('click', function() { 
        // Create variable to represent the value 
        var $value = $('input').val() 
 
        // Putting the values as list in web browser using if and else. 
        if ($value === "") { 
            alert("Enter your to do list") 
        } else { 
            $('.list').append("<li>" + $value + "</li>") 
        } 
        $count = $count + 1; 
        $('.text').text("You have " + $count + " uncompleted tasks") 
    }); 
 
 
    // Underline the list when cliked by user 
    $(document).on("click", "li:not(.line)", function() { 
 
        $count = $('li:not(.line)').length; 
        $(this).addClass("line") 
        $count = $count - 1; 
 
        $('.text').text("You have " + $count + " uncompleted tasks") 
    }); 
 
 
});

.line{ 
  text-decoration: line-through; 
} 
 
 h2 { 
    text-align: center; 
} 
 
body { 
    margin: 0; 
    padding: 15px 0 0 15px; 
    border-collapse: none; 
} 
 
li { 
    font-size: 20px; 
    font-family: 'candara'; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!DOCTYPE html> 
<html> 
<head> 
    <title>J-query Test</title> 
    <script type="text/javascript" src="js/jqueryuncomp-3.3.1.js"></script> 
    <script type="text/javascript" src="js/main.js"></script> 
</head> 
<body> 
    <p>Write down your to do list</p> 
    <input type="text" name="list"> 
    <button>Click</button> 
    <ul class="list"> 
        <li>To do list</li> 
        <li>To do list</li> 
        <li>To do list</li> 
        <li>To do list</li> 
    </ul> 
    <div class="text"> 
 
    </div> 
</body> 
</html>