如何整合重复的javascript函数？

我有一个网站，允许有人下食品订单。可以单击潜在成分的图像（由MySQL查询确定）来添加或删除它们，每次单击时图像都会切换

我遇到的问题是，对于每个新项，我必须复制函数，只需更改每个新函数的变量名即可。我相信一定有一种方法可以简化，动态地应用于所有成分，而不需要所有冗余代码。 这是两个人的密码。有几十个。如有任何建议，将不胜感激

window.onload = function () {
    var ProductElement = document.getElementById('Ketchup');
    if (ProductElement != null) {
        Ketchupobj = document.getElementById('Ketchup')
        document.getElementById('Ketchuptogg').onclick = function () {
            Ketchuptoggle();
        }
    }

    var ProductElement = document.getElementById('Mustard');
    if (ProductElement != null) {
        Mustardobj = document.getElementById('Mustard')
        document.getElementById('Mustardtogg').onclick = function () {
            Mustardtoggle();
        }
    }
}

function Ketchuptoggle() {
    if (Ketchuptggle == 'on') {
        Ketchupobj.src = "Ketchup.jpg";
        Ketchuptggle = 'off';
    } else {
        Ketchupobj.src = "noKetchup.jpg";
        Ketchuptggle = 'on';
    }
}

function Mustardtoggle() {
    if (Mustardtggle == 'on') {
        Mustardobj.src = "Mustard.jpg";
        Mustardtggle = 'off';
    } else {
        Mustardobj.src = "noMustard.jpg";
        Mustardtggle = 'on';
    }
}


<table class="ing">
<tr>
<?php

for ($x=0; $x<5 AND $row = mysql_fetch_row($result);$x++ ) {
$caps=$row[1];
$caps=strtoupper($caps);
echo <<<image
<td><b>$caps</b><br>
<a id="$row[0]" class="toggle" href="#"><img id="$row[0]img" class="toggimg" 
src="$row[0].jpg" style="border-style: none" alt=""/></a>
</td>
image;
}
echo"</tr></table>";

window.onload=函数（）{
var ProductElement=document.getElementById（'Ketchup'）；
if（ProductElement！=null）{
Ketchupbj=document.getElementById（'Ketchup'）
document.getElementById（'Ketchuptogg'）。onclick=function（）{
番茄酱；
}
}
var ProductElement=document.getElementById（'sard'）；
if（ProductElement！=null）{
Mustardobj=document.getElementById（'sard'）
document.getElementById（'Mustardtogg'）。onclick=function（）{
Mustardtoggle（）；
}
}
}
功能番茄酱{
如果（番茄酱=='on'）{
Ketchupobj.src=“Ketchup.jpg”；
番茄酱=关；
}否则{
Ketchupobj.src=“noKetchup.jpg”；
番茄酱=‘开’；
}
}
函数Mustardtoggle（）{
如果（Mustardtggle=='on'）{
Mustardobj.src=“dard.jpg”；
Mustardtggle=‘关’；
}否则{
Mustardobj.src=“noMustard.jpg”；
Mustardtggle='on'；
}
}
使用html，您可以为元素添加属性，因此可以执行以下操作：

<button class="btnProduct" data-type="mostard"> Mostard</button> 
<button class="btnProduct" data-type="ketchup"> Ketchup</button>
<button class="btnProduct" data-type="barbecue"> Barbecue</button> 

这是你的朋友：

var toggles = document.getElementsByClassName('toggle');
for (var i=0; i<toggles.length; i++) {
  toggles[i].isOn = true;
  toggles[i].onclick = function(ev){
     var condiment = this.id;
     this.isOn = !this.isOn;
     document.getElementById(condiment+'img').src=(this.isOn?'':'no')+condiment+'.png';
   };
 }

var-toggles=document.getElementsByClassName（'toggle'）；
对于（var i=0；i请添加一段html code.html（通过php动态生成）按要求添加。做得好+1。但是可以在循环外声明事件处理程序进行优化，因为在每次迭代中，您都在创建一个与其他函数相同的新函数。工作非常出色。我实际上刚刚消除了数百行重复代码。我学习javascript才两周左右，对此一无所知谢谢你的建议！还有，我的声誉还不足以让我投票。如果我有能力的话，我会的。请告诉我我的答案是否有用。我可以使用其他建议的方法来解决我的问题，但我肯定想学习我能学的每一种方法。我会尝试你的建议，然后让你知道。谢谢你的建议答复。
var toggles = document.getElementsByClassName('toggle');
for (var i=0; i<toggles.length; i++) {
  toggles[i].isOn = true;
  toggles[i].onclick = function(ev){
     var condiment = this.id;
     this.isOn = !this.isOn;
     document.getElementById(condiment+'img').src=(this.isOn?'':'no')+condiment+'.png';
   };
 }