0

プロジェクト用にGitHubとGitHub ページをセットアップしました。ボタンが押されると、設定値を取り、入力を減算します。

スクリプトは、最初に設定された値を変数の減算として受け取る必要があります。もう 1 つの変数 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>

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

2 に答える 2

-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 に答える