需要帮助修复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只有一个监听器，它会等待链接标签上的点击，然后运行事件处理程序。

我知道这不能解决你的“越野车”行为，但我认为你会发现这对未来的项目有用。