大佬教程收集整理的这篇文章主要介绍了在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>
$(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>
以上是大佬教程为你收集整理的在jQuery中单击时,元素总数会自动减少一个全部内容，希望文章能够帮你解决在jQuery中单击时,元素总数会自动减少一个所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。