单击扫描仪图像或现金抽屉图像时，将出现一个弹出窗口。您可以选择任一项，它将执行项目和图像交换。但是我注意到如果用户在同一个单选按钮上多次单击它会填充另一个具有相同值的列表项，我该如何阻止它？我知道js文件有点凌乱，请跟我一起出去..我稍后会清理它......
我在cloud9IDE上传了正确上传的所有文件： https://c9.io/laurenashley/lauren_17_ootpik_hardware
或者如果您更喜欢js小提琴版： http://jsfiddle.net/lolsen7/57T3b/17/
<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 id="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="Multi-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-->
<div id="station-builder-2">
<!--hidden items-->
<img id="printer2" class="part" src="images/placeholder/get_hardware/printer2_grey.png" alt="Receipt Printer2" title="Kitchen/Bar/Expo/ printer"/>
<img id="printer3" class="part" src="images/placeholder/get_hardware/printer3_grey.png" alt="Receipt Printer3" title="Kitchen/Bar/Expo/ printer2"/>
<img id="ipadmini" class="part" src="images/placeholder/get_hardware/ipadmini_grey.png" alt="iPad_mini" title="iPad mini" />
<img id="ipadmini2" class="part" src="images/placeholder/get_hardware/ipadmini2_grey.png" alt="iPad_mini" title="iPad mini2"/>
<img id="mobilePrinter" class="part" src="images/placeholder/get_hardware/mobilePrinter_grey.png" alt="Mobile Printer" title="Mobile Printer"/>
<img id="mobilePrinter2" class="part" src="images/placeholder/get_hardware/mobilePrinter2_grey.png" alt="Mobile Printer2" title="Mobile Printer2"/>
</div> <!--end of station-builder-->
<!--tooltip-->
<div class="tooltip place">
<div class="arrow"></div>
<input type="radio" name="group1" value="one" id="single" data-source-image="images/placeholder/get_hardware/singleBar"/>
<label for="single">Singleline Barcode Scanner</label><br>
<input type="radio" name="group1" value="two" id="multi"/>
<label for="multi">Multiline Barcode Scanner</label>
<div class="imageContainer"></div>
</div>
<ul id="list"></ul>
</div><!--end of gethardware-->
</div><!--end of text area-->
</div><!--end of main content-->
`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.id =='printer'){
li = document.createElement("li");
li.setAttribute("id","printer_li");
li.appendChild(document.createTextNode("Receipt Printer"));
list.appendChild(li);
}
if(this.id == "printer2"){
li = document.createElement("li");
li.setAttribute("id","printer2_li");
li.appendChild(document.createTextNode("Receipt Printer"));
list.appendChild(li);
}
if(this.id == "printer3"){
li = document.createElement("li");
li.setAttribute("id","printer3_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.id == "ipadmini"){
li = document.createElement("li");
li.setAttribute("alt","ipad_mini");
li.appendChild(document.createTextNode("iPad mini"));
list.appendChild(li);
}
if(this.id == "multiBar"){
$(".tooltip").show();
$("input").click(function(e){
if($(this).attr("checked", "true")) {
if(this.value == "one") {
$('#singleBar').attr('src','images/placeholder/get_hardware/singleBar.png');
$('#singleBar').show();
$('#multiBar').hide();
li = document.createElement("li");
li.setAttribute("id","single_li");
li.appendChild(document.createTextNode('Single-line Barcode Scanner'));
list.appendChild(li);
$('#single_li').show();
$('#multi_li').remove();
}else if(this.value == "two") {
$('#multiBar').attr('src','images/placeholder/get_hardware/multiBar.png');
$('#multiBar').show();
$('#singleBar').hide();
li = document.createElement("li");
li.setAttribute("id","multi_li");
li.appendChild(document.createTextNode("Multi-line Barcode Scanner"));
list.appendChild(li);
$('#multi_li').show();
$('#single_li').remove();
}
}
})
}
if(this.id =="singleBar"){
$(".tooltip").show();
/*li = document.createElement("li");
li.setAttribute("id","single_li");
li.appendChild(document.createTextNode('Singleline Barcode Scanner'));
list.appendChild(li);*/
}
}
else{
$(this).attr('src', 'images/placeholder/get_hardware/' + this.id + '_grey.png');
console.log(this);
if(this.id == 'multiBar'){
$(".tooltip").hide();
$("#multi_li").remove();
}
if(this.id == "singleBar"){
$('.tooltip').hide();
$('#single_li').remove();
}
if(this.id == "keyboard"){
$("#keyboard_li").remove();
}
if(this.id == "mouse"){
$("#mouse_li").remove();
}
if(this.id == "printer"){
$("#printer_li").remove();
}
if(this.id == "printer2"){
$("#printer2_li").remove();
}
if(this.id == "printer3"){
$("#printer3_li").remove();
}
if(this.id == "scale"){
$("#scale_li").remove();
}
if(this.id == "display"){
$("#display_li").remove();
}
if(this.id == "ipadmini"){
$("ipadi_mini").remove();
}
}
$(this).toggleClass('selected');
});
}）;