- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试图有一个计数器显示未完成的任务总数。单击时,完整的内容会被划线标记。当我单击每个列表时,总数也应该减少 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>
关于jquery - jQuery中点击时元素总数自动减一,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51766248/
+--------+-------+----------+-----------+ | Maker | Model | SeatType | NoOfSeats | +--------+------
如何使用 jQuery 计算 p 标签之间的字符数? 我尝试: DEMO html: 1 1 1 js: var tBytes = 0, tFiles = $('b').length; fo
在 MongoDB 上运行正常的“查找”查询时,我可以通过在返回的游标上运行“计数”来获得总结果计数(不考虑限制)。因此,即使我将结果集限制为 10(例如),我仍然可以知道结果总数为 53(再次,例如
在 100% 堆叠条形图中,如何让数据标签同时显示值和总百分比?示例:129 (60.3%) 当您将鼠标悬停在栏上时,它会显示在工具提示中,但在栏本身上不可见。 此处示例:https://docs.g
我在Kibana中的总和有问题。 我的用例是,我的每个服务器都会定期报告打开的 session 数。在Kibana中,我想可视化所有服务器上所有 session 的总数。但是,即使只有一台服务器联机且
我正在使用 jQuery 和 ASP.NET MVC 3 以及 razor View 引擎。 我有几个可以在其中输入数值的文本框。我有一个标签控件,其中包含由 jQuery 计算的文本框总数。 我有以
像这样的结果: 75 Ansari 5 10 88 Koodoo 4 0 90 Koodoo 14 0 83 Koodoo 5 0
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗? 通过 editing this post 添加细节并澄清问题. 关闭 9 年前。 Improve t
我是 PHP 的初学者,我正在为我的网站编写一些代码。我想获得当时处于事件状态的 session 总数。我知道这是一项艰巨的任务,但有可能。我该怎么做? 我google了一下,有人说可以通过统计tem
1。问题陈述 我很难在正确的记录行中显示 COUNT() 的总数。 如何将 COUNT() 显示到正确的相应服务 2。背景 我想根据stage_id 和分解到project_name 显示员工负责的项
我整个下午都在尝试处理一个(或两个或三个)查询,以便获得三个表的所有子表的计数。看看我的设计: 用户表 id_user | name 1 | foo 2 | bar 获奖表 id_won | user
我有以下脚本。想要文件夹、子文件夹和文件的数量: Sub CountFiles(ByVal path1 As String) Dim fso As Object Dim subfolder As Ob
我对 c3.js 中的饼图有疑问。 如何在标题中添加饼图的总数? var title = new Array('data1.sql','data2.sql') var dtitle = new Arr
我在这方面玩得很开心。我正在尝试针对具有递归关系(分层)的表编写查询(使用 Oracle),并获取存储在树中每个节点及其下方的另一个表中的记录总数。另一个表只有与叶节点相关的记录。但是,我想获得树中每
有没有办法获取模块在任何时间点使用的绑定(bind)总数(通过模板的 {{ .. }}/ng-xxx="..." 、 $scope.$watch(...) 等)? 最佳答案 使用 document.g
我有一个非常简单的表格,因为我现在真的只是在玩 RoR,只是收集一些数据并将其插入数据库,没有什么令人兴奋的只是基本的 CRUD。但是,我想在表格的页脚中放置一个总和字段,但我在网上找不到任何接近的东
这个 mysql 查询给出了我的产品的销售数量(total 和total_staff),按一天中的天数和小时数分组。我想要每个产品的 total 和 total_staff 的总和(不按任何内容分组,
我正在尝试计算 For 循环中每个 user_name 赢得的总金额,并将其显示在 Amount Won: 之后。但是,当我运行下面的代码时,赢得金额后没有任何显示: - 它完全是空白的。我什至尝试将
我有 3 个表。产品价格、开票产品和订购产品的表格。我正在尝试创建一个连接这些的 View 。我想输出产品价格以及开票产品总数和订购产品总数。 产品价格 id season_id product
例如,我在另一个查询的 while 循环内的查询中有一个 mysql_num_rows 结果为 4,8,15,16,23,42。我的问题是如何计算 while 循环中的所有结果? (共 133 个)谢
我是一名优秀的程序员,十分优秀!