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