2

私は誰かが食べ物を注文できるようにするサイトを持っています。潜在的な成分の画像 (MySQL クエリによって決定される) をクリックして、それらを追加または削除できます。クリックするたびに画像が切り替わります。

私が抱えている問題は、新しいアイテムごとに関数を複製し、新しい関数ごとに変数名を変更する必要があることです。冗長なコードをすべて使わずに、すべての構成要素に動的に適用するように簡素化する方法が必要だと確信しています。これが2つのコードです。数十あります。任意の提案をいただければ幸いです。

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>";
4

2 に答える 2

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';
   };
 }
于 2013-10-25T22:42:40.123 に答える
0

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'))
}
于 2013-10-25T22:34:03.803 に答える