的console.log（變量）與多個複製自身通過

Question

首先，這簡直是我的第一個我想從頭開始做半分層菜單。如果這段代碼看起來馬虎，請推薦任何提示以儘量減少它。

的一點是： 代碼工作正常。 線：242
直播@： http://www.sinsysonline.com/repair/form_sinsys2.html

出於某種原因，它是設置我的變量sysStr（這是被點擊系統中的藍色標題顯示）多次。
觀察什麼，我說什麼，通過流量移動： 單擊系統，單擊某個位置，選擇系統類型的向下箭頭，單擊系統，並單擊某個位置。

我有它console.log（sysStr），看看它是什麼建立，併爲其記錄+1項目的每個工作流程。 （在通過工作流程工作時在Firebug或開發人員工具控制檯中查看）。

BTW：爲了證明它的作品，我只有兩種形式：
*桌面 - >提貨
*桌面 - >下車

爲什麼它CONSOLE.LOG（sysStr）每個工作流程多次？我很難過：/

到了點： 代碼工作正常。 線：242
直播@： http://www.sinsysonline.com/repair/form_sinsys2.html

<script> 
(function() { 

var systemDiv = $('div#repair_system'), 
    locationDiv = $('div#repair_location'), 
    systemH2 = $('h2#system_type'), 
    locationH2 = $('h2#location_type'), 

    systemSel = $('span#system_selected'), 
    systemChange = $('a#system_redo'), 
    locationSel = $('span#location_selected'), 
    locationChange = $('a#location_redo'); 

    $("a").click(function() { return false; }); 

    $('div#repair_system img').on('click', function() { 

     var sysStr = $(this).attr('alt'); 

     systemDiv.slideUp(); 
     systemSel.show(); 
     systemSel.text(sysStr); 
     systemChange.show(); 
     locationDiv.slideDown(); 

     systemChange.on('click', function() { 
      $(this).hide(); 
      systemDiv.slideDown(); 
      systemSel.hide(); 
      locationDiv.slideUp(); 
      locationSel.hide(); 
      locationChange.hide(); 
      $('div#repair_forms div').hide(); 
     }); 

     locationChange.on('click', function() { 
      $(this).hide(); 
      locationSel.hide(); 
      systemDiv.slideUp(); 
      systemSel.show(); 
      systemChange.show(); 
      locationDiv.slideDown(); 
      $('div#repair_forms div').hide(); 
     }); 

     $('div#repair_location img').on('click', function() { 
      var locStr = $(this).attr('alt'), 
       sysStr = systemSel.text(); 

      locationDiv.slideUp(); 
      locationSel.show(); 
      locationSel.text(locStr); 
      locationChange.show(); 
      $('div#repair-' + sysStr + '-' + locStr).show(); 

      console.log(sysStr); 
     }); 
    }); 

    $("img.a").hover(
     function() { 
     $(this).stop().animate({"opacity": "0"}, "fast"); 
     }, 
     function() { 
     $(this).stop().animate({"opacity": "1"}, "slow"); 

    }); 

})(); 
</script> 

Answer 1

這是因爲在你的HTML您在每個這些div 即

<div class="glow"> <img src="images/remote-icon-bw.jpg" class="a" alt="remote" style="opacity: 1;"> <img src="images/remote-icon.jpg" class="b" alt="remote"> <h2>Remote</h2> </div> 

嘗試添加的有兩個IMG標籤類圖像中的一個說，即IMG單擊

<div class="glow"> <img src="images/remote-icon-bw.jpg" class="a img-click" alt="remote" style="opacity: 1;"> <img src="images/remote-icon.jpg" class="b" alt="remote"> <h2>Remote</h2> </div> 

現在這條線

$('div#repair_system img').on('click', function() { 

改變

$('div#repair_system img.image-click').on('click', function() { 

Answer 2

好吧，爲了簡單起見，我剛剛結束了它建設成的網站反正。

變量sysStr的重複的console.log仍然是識別有用：

http://www.sinsysonline.com/repair/contact.html（整頁） http://www.sinsysonline.com/repair/form.php（單獨形式）

上的標記和jQuery流反饋，將不勝感激（打我！）。