0

当前，当单击按钮时，它会减去输入的值。单击预设按钮后，我希望减去预设值。我也可以稍后在具有不同值的不同按钮上重用一个函数，如下所示：

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

这是我拥有的当前功能。第一个按钮功能有效，但我想将其复制到具有预设值的预设按钮中。该函数不会包含 $(this) 因为按钮不会在同一个包装 div 中并且不是兄弟姐妹。

$(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 回答