0

我已经为我的项目设置了一个GitHub以及一个GitHub 页面。一旦按下按钮，它就会取一个设定值并减去输入。

该脚本应将最初设置的值作为变量减去。另一个可变电流被定义为电流数。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>

脚本.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);
    });
});
4

2 回答 2

2

$('.number p').html(newVal);将所有元素的 html 设置.number p为指定的 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(); 
        });            
    });
});
于 2013-08-05T14:32:48.397 回答
-1

http://jsfiddle.net/zunc8/

你必须找到你想要改变的那个：

$(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);
    });
});
于 2013-08-05T14:37:12.310 回答