Question

我有一个网站允许某人下订单。可以单击潜在成分的图像（由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>";

Answer 1

暗示这是你的朋友：

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

Answer 2

使用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>

然后在jquery的帮助下你可以做到：

$('btnProduct').click(function(){
    //So, here you could use a switch or some logic 
    // to do different things for data-type
    console.log($(this).attr('data-type'))
}

如何整合重复的javascript函数？

2 个答案: