0

現在、ボタンをクリックすると、入力された値が減算されます。プリセットボタンをクリックすると、プリセット値が減算されます。次のように、後で別のボタンで別の値を使用して関数を再利用できることも望ましいでしょう。

var preset = function(val1, val2, val3, val4) {
    //function to subtract from current values
}
$('presetButton').click(function(){
    preset(1,2,3,4)
}

これが私が持っている現在の機能です。最初のボタン機能は機能しますが、プリセット値を持つプリセット ボタンにコピーしたかったのです。ボタンは同じラッパー div になく、兄弟ではないため、関数には $(this) は含まれません。

$(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;
        var $history = $button.siblings('.wrap').children('.history');
       if (isNaN(subtract)) {
        alert("Please enter in a number");
       } else {
            $currentP.effect('bounce', function() {
              $currentP.text(newVal);
              $(this).show();
          });
            $history.append("<p>"+subtract+"</p>");
       }
    });
    $('#presets').click(function(){
        //set up the subtracting and current variables
        var subCal = 120;
        var subPro = 24;
        var subCarbs = 3;
        var subFat = 1;

        //retrieve current number then convert to a number
        var toNum = function(id) {
            return parseInt($(id + ' .number').children('p').text(), 10);
        }
        var curCal = toNum('#calories');
        var curPro = toNum('#protein');
        var curCarbs = toNum('#carbs');
        var curFat = toNum('#fats');

        //create new values
        var newCal = curCal - subCal;
        var newPro = curPro - subPro;
        var newCarbs = curCarbs - subCarbs;
        var newFat = curFat - subFat;

        //apply new values
        var applyNew = function(id, newVal) {
            $(id + ' .number p').text(newVal)
        }
        applyNew('#calories', newCal);
        applyNew('#protein', newPro);
        applyNew('#carbs', newCarbs);
        applyNew('#fats', newFats);

            //Add to presets to history
    })
});

HTML

<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"></input>
            <button>Subtract</button>
            <div class="wrap">
                <div class="history"></div>
            </div>


        </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 class="wrap">
                <div class="history"></div>
            </div>
        </div>
        <div id="carbs">
            <div class="number"><p>173</p></div>
            <div class="label"><p>Carbs</p></div>
            <input type="text" class="subtract"></input>
            <button>Subtract</button>
            <div class="wrap">
                <div class="history"></div>
            </div>
        </div>
        <div id="fats">
            <div class="number"><p>50</p></div>
            <div class="label"><p>Fats</p></div>
            <input type="text" class="subtract"></input>
            <button>Subtract</button>
            <div class="wrap">
                <div class="history"></div>
            </div>
        </div>
    </div>
    <div id="presets"><img src="on-logo.png"></div>
4

1 に答える 1

1

試す

$(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;
        var $history = $button.siblings('.wrap').children('.history');
        if (isNaN(subtract)) {
            alert("Please enter in a number");
        } else {
            $currentP.effect('bounce', function() {
                $currentP.text(newVal);
                $(this).show();
            });
            $history.append("<p>"+subtract+"</p>");
        }
    });
    var preset = function(val1, val2, val3, val4) {
        //set up the subtracting and current variables
        var subCal = val1;
        var subPro = val2;
        var subCarbs = val3;
        var subFat = val4;

        //retrieve current number then convert to a number
        var toNum = function(id) {
            return parseInt($(id + ' .number').children('p').text(), 10);
        }
        var curCal = toNum('#calories');
        var curPro = toNum('#protein');
        var curCarbs = toNum('#carbs');
        var curFat = toNum('#fats');

        //create new values
        var newCal = curCal - subCal;
        var newPro = curPro - subPro;
        var newCarbs = curCarbs - subCarbs;
        var newFats = curFat - subFat;

        //apply new values
        var applyNew = function(id, newVal) {
            $(id + ' .number p').text(newVal);
        }
        //apply new values
        var applyHistory = function(id, val) {
            $(id + ' .history').append("<p>" + val + "</p>");
        }

        applyNew('#calories', newCal);
        applyNew('#protein', newPro);
        applyNew('#carbs', newCarbs);
        applyNew('#fats', newFats);

        applyHistory('#calories', subCal);
        applyHistory('#protein', subPro);
        applyHistory('#carbs', subCarbs);
        applyHistory('#fats', subFat);
    }
    $('#presets').click(function(){
        preset(120,24,3,1);
    })
});

デモ:フィドル

于 2013-08-07T05:26:01.293 に答える