需要幫助修復bug並優化javascript代碼

Question

我一直在努力增強此網頁，並且我相信當您看到以下代碼時您會大笑，但我一直在教自己的JavaScript，所以我對自己能夠走多遠感到有些自豪。問題在於，一旦你開始點擊地圖上的幾個城市，我所做的只是一點小小的錯誤，而我還不夠精明。另外，我敢肯定，我已經採取了漫長的風景線路，讓代碼發揮作用，所以我正在轉向全知的社區，希望有人能夠教這個人如何編碼。

你可以看到完整的發展在這裏：http://buhmanphotography.com/map/

這裏是錯誤我看到的視頻：http://buhmanphotography.com/map/buggyCode/

$(document).ready(function() { 
     // Show the Map Container 
     $('.locBox a').click(function (e) { 

      // Initialize info for clicked location 
      var initLocInfo = $(this).attr("rel") + "Ctn"; 

      // Show Initial Information 
      $('#' + initLocInfo).show(); 
      $('#' + initLocInfo).css('opacity','1'); 
      $('#' + initLocInfo).addClass('modActive'); 


      // Initialize Button State on Map 
      var initLocBtn = $(this).attr("rel") + "Btn"; 
      $('#' + initLocBtn).css('backgroundPosition','top'); 

      // Open Map Box 
      $("#mapModalCtn").show(); 
      $("#mapModalCtn").animate({ 
       opacity: 1 
      }, 500); 
      e.preventDefault(); 
     }); 

     // Hide the Map Container 
     $('#modalTitle a').click(function (e) { 
      $("#mapModalCtn").animate({ 
       opacity: 0 
      }, 500, function() { 
       $("#mapModalCtn").hide(); 
       $('#modLeftCol > div').removeClass('modActive'); 
       $('#modLeftCol > div').hide(); 
       $('#modRightCol a').css('backgroundPosition','bottom'); 
      }); 
      e.preventDefault(); 
     }); 

     // Show the info for the selected Location on the Map 
     $('#modRightCol a').click(function (e) { 
      e.preventDefault(); 
      var locInfo = $(this).attr("rel") + "Ctn"; 
      var locBtn = $(this).attr("rel") + "Btn"; 

      // Change Map Location Button State 
      $('#modRightCol a').css('backgroundPosition','bottom'); 
      $(this).css('backgroundPosition','top'); 

      // Hide currently visible information 
      if ($('#modLeftCol > div').hasClass('modActive')) { 
       $("#modLeftCol > div").animate({ 
        opacity: 0 
       }, 500, function(){ 
        $("#modLeftCol > div").hide(); 
        $("#modLeftCol > div").removeClass('modActive'); 

        //Show information related to location clicked 
        $('#' + locInfo).show(); 
        $('#' + locInfo).animate({ 
          opacity: 1 
         }, 500, function(){ 
          $('#' + locInfo).addClass('modActive'); 
         }); 
       }); 
      } 


     }); 

    }); 

Answer 1

Need help fixing bugs and optimizing javascript code

我去給你一些一般諮詢。總的來說，在你擔心某些事情非常有效之前，最好先做一些工作。這並不意味着你應該以低效的方式故意做事，但正確性應該比被優化的事情更重要。

你可以回頭看看你的代碼，並在你的代碼運行後對其進行優化。我發現，如果我過分努力地提高效率（在完成之前），我將永遠無法完成它！

至於讓你的代碼更好，一個好的經驗法則是緩存事情。

例如做：

var container = $('#container'); 
container.css({ ‘background-color’ : ‘#f00’}); 
container.bind(‘click’, function() { do something }); 

相反的：

$(‘#container’).css({‘background-color’ : ‘#f00’}); 
$(‘#container’).bind(‘click’, function() { do something }); 

每次你做$（「someElement」），這需要時間。它必須搜索整個DOM才能找到該元素。如果您要經常引用此DOM元素，最好保存對此元素的引用並使用此引用。從而消除所有這些不必要的查找。

另一件需要考慮的事情是儘可能使用jquery的代表。如果在同一區域內有很多點擊監聽器，代表就很好。

例如而不是在你的.locBox類中的所有鏈接添加點擊監聽器：

$('.locBox a').click(function (e) { 

做這樣的事情：

$(‘.locBox’).delegate(‘a’, ‘click’, function() { … do something … }); 

這是一件好事，因爲現在你將每個.locBox只有一個監聽器，它會等待鏈接標籤上的點擊，然後運行事件處理程序。

我知道這不能解決你的「越野車」行爲，但我認爲你會發現這對未來的項目有用。