Javascript 如何使用预设值复制此功能？_Javascript_Jquery_Jquery Ui

Javascript 如何使用预设值复制此功能？

javascript jquery jquery-ui

Javascript 如何使用预设值复制此功能？,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,当前单击按钮时，会减去输入值。我想在单击预设按钮后减去一个预设值。如果我以后可以在不同的按钮上使用不同的值重用一个函数，这也是可行的，如下所示： var preset = function(val1, val2, val3, val4) { //function to subtract from current values } $('presetButton').click(function(){ preset(1,2,3,4) } 这是我的当前函数。第一个按钮功能可以工作，

当前单击按钮时，会减去输入值。我想在单击预设按钮后减去一个预设值。如果我以后可以在不同的按钮上使用不同的值重用一个函数，这也是可行的，如下所示：

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

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var$按钮=$（此按钮）；
var subtract=parseInt（$button.sillides（'input'）.val（），10）；
var$currentP=$button.sides（'.number'）。children（'p'）；
var current=parseInt（$currentP.text（），10）；
var newVal=当前-减去；
var$history=$button.sides（'.wrap'）.children（'.history'）；
if（isNaN（减法））{
警报（“请输入一个数字”）；
}否则{
$currentP.effect（'bounce'，function（）{
$currentP.text（newVal）；
$（this.show（）；
});
$history.append（“”+subtract+””）；
}
});
$（“#预设”）。单击（函数（）{
//设置减法和当前变量
var subCal=120；
var subpo=24；
var-subCarbs=3；
var-subbat=1；
//检索当前数字，然后转换为数字
var toNum=函数（id）{
返回parseInt（$（id+'.number'）.children（'p'）.text（），10）；
}
var curCal=热量（“#卡路里”）；
var curPro=张力（'蛋白质'）；
var curCarbs=toNum（“#carbs”）；
var curFat=toNum（“#fats”）；
//创造新的价值观
var newCal=curCal-subCal；
var newPro=curPro-subPro；
var newCarbs=curCarbs-subCarbs；
var newFat=curFat-亚脂肪；
//应用新值
var applyNew=函数（id，newVal）{
$（id+'.number p'）.text（newVal）
}
applyNew（“#卡路里”，newCal）；
applyNew（“#蛋白质”，newPro）；
applyNew（“#carbs”，newCarbs）；
applyNew（“#fats”，newFats）；
//将预设添加到历史记录
})
});

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>

跟踪宏
1945年
卡路里
减去
二百
蛋白质
减去
173
碳水化合物
减去
五十
脂肪
减去

试试看

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var$按钮=$（此按钮）；
var subtract=parseInt（$button.sillides（'input'）.val（），10）；
var$currentP=$button.sides（'.number'）。children（'p'）；
var current=parseInt（$currentP.text（），10）；
var newVal=当前-减去；
var$history=$button.sides（'.wrap'）.children（'.history'）；
if（isNaN（减法））{
警报（“请输入一个数字”）；
}否则{
$currentP.effect（'bounce'，function（）{
$currentP.text（newVal）；
$（this.show（）；
});
$history.append（“”+subtract+””）；
}
});
var预设=功能（val1、val2、val3、val4）{
//设置减法和当前变量
var subCal=val1；
var subPro=val2；
var subCarbs=val3；
var subbat=val4；
//检索当前数字，然后转换为数字
var toNum=函数（id）{
返回parseInt（$（id+'.number'）.children（'p'）.text（），10）；
}
var curCal=热量（“#卡路里”）；
var curPro=张力（'蛋白质'）；
var curCarbs=toNum（“#carbs”）；
var curFat=toNum（“#fats”）；
//创造新的价值观
var newCal=curCal-subCal；
var newPro=curPro-subPro；
var newCarbs=curCarbs-subCarbs；
var newFats=curFat-亚脂肪；
//应用新值
var applyNew=函数（id，newVal）{
$（id+'.number p'）.text（newVal）；
}
//应用新值
var applyHistory=函数（id，val）{
$（id+'.history'）。追加（“”+val+””）；
}
applyNew（“#卡路里”，newCal）；
applyNew（“#蛋白质”，newPro）；
applyNew（“#carbs”，newCarbs）；
applyNew（“#fats”，newFats）；
苹果历史（“#卡路里”，subCal）；
苹果历史（“#蛋白质”，subPro）；
应用历史（“#carbs”，subCarbs）；
苹果历史（“#脂肪”，亚脂肪）；
}
$（“#预设”）。单击（函数（）{
预设（120,24,3,1）；
})
});

演示：

试试看，效果不错，但你能告诉我你改变了什么吗。我看到您在“.p”中添加了一个空格，并在“”中添加了#carries，但其他更改我不确定是什么。还有，我如何才能像在原始按钮功能中那样将预设添加到历史记录中？nvm我让它工作了，但我仍然需要处理历史记录部分。在id为+'之前，您做了哪些更改。数字p'将其更改为id+'。数字p'然后我将所有的id从#卡路里更改为#卡路里'。如果我想做一个更通用的函数，我可以把它复制到一个preset（）函数中，其中的参数是replace subCal，subpo，subCarbs，subbats吗？

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