javascript - 使用 onclick 函数使用 id 和 classes 打开和关闭图像，以及使用 onclick 生成和更新列表项

Question

使用 onclick 功能打开和关闭图像，我将图像设置为“id”，这就是我打开和关闭它们的方式。但是我有 3 组图像需要在一个“类”中。我想将所有内容都保留在功能范围内。以免有两个“onclick 功能”。我也无法增加和减少课程中图像的值。所以想法是，当您单击图像时，图像会动态生成一个列表项。并再次单击图像（转动图像）并删除列表项。我在使用类项时遇到问题，因为每次单击同一类的项时都需要更新该列表项。

如果这有帮助：https ://c9.io/laurenashley/lauren_17_ootpik_hardware 我可以授予您访问权限....

这是所有正在打开和关闭的图像。有两个车站建设者..

这是一号站：<

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