从当前数字中减去输入
[英]Subtract an input from the current number
问题描述
我已经为我的项目设置了GitHub以及GitHub页面 。 按下按钮后，它将获得一个设定值并减去输入。
脚本应将最初设置的值作为变量减。 另一个可变电流定义为电流编号。 将newVal定义为current-减去。 将当前值更改为newVal。 在更改数字之前，请使用jQuery反弹效果。
目前，效果会影响所有数字，而不是已编辑的数字。
这是我想出的办法，直到卡住index.html
<!DOCTYPE html>
<html>
<head>
<title>Macros Tracker</title>
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="scripts/jquery.jeditable.mini.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
<h1>Track your Macros</h1>
<div class="wrapper">
<div id="calories">
<div class="number"><p>1945</p></div>
<div class="label"><p>Calories</p></div>
<input type="text" id="subtract"></input>
<button>Subtract</button>
</div>
<div id="protein">
<div class="number"><p>200</p></div>
<div class="label"><p>Protein</p></div>
<input type="text"></input>
<button>Subtract</button>
</div>
<div id="carbs">
<div class="number"><p>150</p></div>
<div class="label"><p>Carbs</p></div>
<input type="text"></input>
<button>Subtract</button>
</div>
<div id="fats">
<div class="number"><p>51</p></div>
<div class="label"><p>Fats</p></div>
<input type="text"></input>
<button>Subtract</button>
</div>
</div>
</body>
</html>
script.js
$(document).ready(function(){
$('button').click(function(){
var subtract = parseInt($('#subtract').val(), 10);
var current = parseInt($('.number p').val());
var newVal = current - subtract;
$('.number p').effect('explode');
$('.number p').html(newVal);
});
});
2 个解决方案
解决方案1
2 已采纳 2013-08-05 14:32:48
$('.number p').html(newVal); 将与.number p匹配的所有元素的html设置为指定的html。
您需要使用按钮的上下文并遍历DOM以获得相关元素：
$(document).ready(function(){
$('button').click(function(){
var $button = $(this);
var subtract = parseInt($button.siblings('input').val(), 10);
var $currentP = $button.siblings('.number').children('p');
var current = parseInt($currentP.text(), 10);
var newVal = current - subtract;
$currentP.effect('explode', function() {
$currentP.text(newVal);
$(this).show();
});
});
});
解决方案2
-1 2013-08-05 14:37:12
您只需要找到要更改的那个即可：
$(document).ready(function(){
$('button').click(function(){
var parent = $(this).parent();
var subtract = parseInt(parent.find('#subtract').val(), 10);
var current = parseInt(parent.find('.number p').text(),10);
var newVal = current - subtract;
//$('.number p').effect('explode');
parent.find('.number p').text(newVal);
});
});
从给定的最大数量减去并输出数字输入值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.