javascript - onclick 関数を使用して、ID とクラスを使用して画像のオンとオフを切り替え、onclick でリスト項目を生成および更新する

Question

onclick 関数を使用して画像のオンとオフを切り替え、「id」を使用して画像を設定し、それがオンとオフを切り替えてきた方法です。ただし、「クラス」に含める必要がある3セットの画像があります。すべてを機能内に保ちたいと思います。2つの「onclick機能」を持たないように。また、クラスに含まれる画像の値を増減するのにも問題があります。つまり、画像をクリックすると、画像が動的にリスト項目を生成します。画像をもう一度クリックすると（画像の回転）、リスト項目が削除されます。同じクラスのアイテムがクリックされるたびにリストアイテムを更新する必要があるため、クラスアイテムでこれを行うのに問題があります。

これが役立つ場合: https://c9.io/laurenashley/lauren_17_ootpik_hardware アクセスを許可できます....

これは、オンとオフを切り替えているイメージのすべてです。ステーションビルダーは2人。

これはステーション 1 です: <

div id="station-builder">
                           <!--visible at all times-->
                            <img id="touchscreen"   src="images/placeholder/get_hardware/touchscreen.png" alt="Touchscreen" title="Touchscreen"/>
                            <img id="macmini"       src="images/placeholder/get_hardware/macmini.png" alt="Mac mini" title="Mac mini"/> 
                            <!--hidden items-->
                            <img id="cashDrawer"    class="part" src="images/placeholder/get_hardware/cashDrawer_grey.png"     alt="Cash Drawer" title="Cash Drawer"/>
                            <img id="storageDrawer" class="part" src="images/placeholder/get_hardware/storageDrawer_grey.png"  alt="Cash Drawer with Storage" title="Cash Drawer with Storage"/>
                            <img id="keyboard"      class="part" src="images/placeholder/get_hardware/keyboard_grey.png" alt="Keyboard" title="Keyboard"/>
                            <img id="mouse"         class="part" src="images/placeholder/get_hardware/mouse_grey.png"    alt="Mouse" title="Mouse"/>
                            <img class="printer"       class="part" src="images/placeholder/get_hardware/printer_grey.png"  alt="Receipt Printer" title="Receipt Printer"/>

                            <img id="singleBar"     class="part" src="images/placeholder/get_hardware/singleBar_grey.png"   alt="Single-line Barcode Scanner" title="Single-line Barcode Scanner"/>
                            <img id="multiBar"      class="part" src="images/placeholder/get_hardware/multiBar_grey.png"    alt="Multip-line Barcode Scanner" title="Multip-line Barcode Scanner"/>  

                            <img id="scale"         class="part" src="images/placeholder/get_hardware/scale_grey.png"    alt="WeighScale" title="WeighScale"/> 
                            <img id="display"       class="part" src="images/placeholder/get_hardware/display_grey.png"  alt="Customer Display" title="Customer Display"/> 
                        </div> <!--end of station-builder-->
This is station two        
                        <div id="station-builder-2">
                            <!--hidden items-->
                            <img class="printer"       class="part" src="images/placeholder/get_hardware/printer2_grey.png"  alt="Receipt Printer2" title="Kitchen/Bar/Expo/ printer"/>
                            <img class="printer"       class="part" src="images/placeholder/get_hardware/printer3_grey.png"  alt="Receipt Printer3" title="Kitchen/Bar/Expo/ printer2"/>

                            <img class="ipadmini"       class="part" src="images/placeholder/get_hardware/ipadmini_grey.png"  alt="iPad_mini" title="iPad mini" />
                            <img class="ipadmini"      class="part" src="images/placeholder/get_hardware/ipadmini2_grey.png"  alt="iPad_mini" title="iPad mini2"/>

                            <img class="mobilePrinter"   class="part" src="images/placeholder/get_hardware/mobilePrinter_grey.png"  alt="Mobile Printer" title="Mobile Printer"/>
                            <img class="mobilePrinter"  class="part" src="images/placeholder/get_hardware/mobilePrinter2_grey.png"  alt="Mobile Printer2" title="Mobile Printer2"/>
                        </div> <!--end of station-builder-->

    <ul id="list"></ul>

以下は javascript の始まりです: //JS FOR HARDWARE SECTION

$(document).ready(function () {
  $(".part").mouseover(function () {
    if (this.className !== 'part selected') {
      $(this).attr('src', 'images/placeholder/get_hardware/' + this.id + '.png');
    }
    $(this).mouseout(function () {
      if (this.className !== 'part selected') {
        $(this).attr('src', 'images/placeholder/get_hardware/' + this.id + '_grey.png');
      }
    });
  });
  var list = document.getElementById("list");
  $(".part").click(function () {
    if (this.className == 'part') {
      $(this).attr('src', 'images/placeholder/get_hardware/' + this.id + '.png');
      console.log(this);
      if (this.id == 'keyboard') {
        var li = document.createElement("li");
        //li.setAttribute("alt","keyboard_li");
        li.setAttribute("id", "keyboard_li");
        li.appendChild(document.createTextNode('Keyboard'));
        list.appendChild(li);
        //$(".tooltip").show();
      }
      if (this.id == 'mouse') {
        li = document.createElement("li");
        li.setAttribute("id", "mouse_li");
        li.appendChild(document.createTextNode('Mouse'));
        list.appendChild(li);
      }
      if (this.class == 'printer') {
        li = document.createElement("li");
        li.setAttribute("class", "printer_li");
        li.appendChild(document.createTextNode("Receipt Printer"));
        list.appendChild(li);
      }
      if (this.class == "printer") {
        li = document.createElement("li");
        li.setAttribute("class", "printer_li");
        li.appendChild(document.createTextNode("Receipt Printer"));
        list.appendChild(li);
      }
      if (this.class == "printer") {
        li = document.createElement("li");
        li.setAttribute("class", "printer_li");
        li.appendChild(document.createTextNode("Receipt Printer"));
        list.appendChild(li);
      }
      if (this.id == 'scale') {
        li = document.createElement("li");
        li.setAttribute("id", "scale_li");
        li.appendChild(document.createTextNode("Weighscale"));
        list.appendChild(li);
      }
      if (this.id == 'display') {
        li = document.createElement("li");
        li.setAttribute("id", "display_li");
        li.appendChild(document.createTextNode("Customer Display"));
        list.appendChild(li);
      }
      if (this.class == "ipadmini") {
        li = document.createElement("li");
        li.setAttribute("class", "ipad_mini");
        li.appendChild(document.createTextNode("iPad mini"));
        list.appendChild(li);
      }
    } else {
      $(this).attr('src', 'images/placeholder/get_hardware/' + this.id + '_grey.png');
      console.log(this);
      if (this.id == 'multiBar') {
        $(".tooltip").hide();
      }
      if (this.id == "keyboard") {
        $("#keyboard_li").remove();
      }
      if (this.id == "mouse") {
        $("#mouse_li").remove();
      }
      if (this.class == "printer") {
        $("#printer_li").remove();
      }
      if (this.class == "printer") {
        $("#printer_li").remove();
      }
      if (this.class == "printer") {
        $("#printer_li").remove();
      }
      if (this.id == "scale") {
        $("#scale_li").remove();
      }
      if (this.id == "display") {
        $("#display_li").remove();
      }
      if (this.class == "ipadmini") {
        $("ipadi_mini").remove();
      }
    }
    $(this).toggleClass('selected');
  });
});