Javascript 从当前数字中减去一个输入_Javascript_Jquery_Jquery Ui

Javascript 从当前数字中减去一个输入

javascript jquery jquery-ui

Javascript 从当前数字中减去一个输入,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我已经为我的项目设立了一个项目，外加一个项目。按下按钮后，它获取一个设定值并减去输入脚本应将最初设置的值作为变量减法。另一个变量current被定义为当前编号。newVal被定义为当前减法。将当前值更改为newVal。在更改数字之前，请使用jQuery反弹效果目前，效果会影响所有数字，而不是编辑的数字这就是我一直想到的，直到我陷入困境 index.html <!DOCTYPE html> <html> <head> <title>Ma

我已经为我的项目设立了一个项目，外加一个项目。按下按钮后，它获取一个设定值并减去输入

脚本应将最初设置的值作为变量减法。另一个变量current被定义为当前编号。newVal被定义为当前减法。将当前值更改为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>

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

您必须找到您想要更改的：

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

确保将第二个参数与

parseInt

一起使用-第一次使用，但第二次不使用。和

元素没有

值

属性（由

.val（）

检索）。您可能打算使用

.text（）

使用

$（'class here'）

将返回多个元素，请求它的

val（）

或

text（）

将只返回集合中第一个元素的值，这似乎是可行的，但具有类似样式的样式=“能见度：可见；显示：无；出于某种原因。我是否需要向脚本中添加更多内容来禁用这些默认值？由于$currentP.effect（'explode'），您的代码无法工作；我编辑了我的答案。我还没有测试过它，但它看起来像是爆炸效果隐藏了元素。我添加了一个回调以在动画完成后显示元素。我做了另一个可能更适合用户的轻微更改：文本在爆炸效果完成之前不会更新。

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