重構/優化大塊jQuery代碼的提示

Question

我正在用工具提示使用jquery構建一個小小的「漫遊」類型指南。

頁面加載時，頁面的一部分的工具提示旁邊會出現「第1步」，並且當他們點擊所需區域時，消失並且「第2步」將出現在頁面的更下方。

我的代碼工作正常，但我只是尋求如何改進和優化我寫的內容或者簡化整個過程的建議。我已經嘗試在$（'。helpTip'）選擇器等地方使用變量，但我相信我必須在每個點擊函數中定義該變量，這有點毫無意義嗎？

反正代碼：

$('.box1').append('<div class="helpTip">Step 1. <span>text</span></div>'); 

$('.box1 li').click(function() { 
    $('.helpTip').fadeOut().remove(); 
    $('.box2').append('<div class="helpTip">Step 2. <span>text</span></div>'); 
}); 

$('.box2 p').click(function() { 
    $('.helpTip').fadeOut().remove(); 
    $('.box3').append('<div class="helpTip">Step 3. <span>text</span></div>'); 
}); 

$('.box3 div').click(function() { 
    $('.helpTip').fadeOut().remove(); 
    $('.box4').append('<div class="helpTip">Step 4. <span>text</span></div>'); 
}); 

$('.box4 div').click(function() { 
    $('.helpTip').fadeOut().remove(); 
    $('.box5').append('<div class="helpTip">Step 5. <span>text</span></div>'); 
}); 

$('.box5').click(function() { 
    $('.helpTip').fadeOut().remove(); 
    // Do something to the submit button? 
}); 

HTML，如果有幫助：

<!-- Step 1 --> 
<div class="formWrap"> 
    <div class="formInner"> 
     <div class="formHeader"> 
      <h3>1. </h3> 
     </div> 
     <div class="box1"> 

     </div> 
    </div>      
</div> 

<!-- Step 2 --> 
<div class="formWrap"> 
    <div class="formInner"> 
     <div class="box2"> 

     </div> 
    </div> 
</div>     

<!-- Step 3 --> 
<div class="formWrap"> 
    <div class="formInner"> 
     <h3 class="formHeader">3. </h3> 
     <div class="box3"> 

     </div> 
    </div> 
</div> 

<!-- Step 4 --> 
<div class="formWrap"> 
    <div class="formInner"> 
     <h3 class="formHeader">4. </h3> 
     <div class="box4"> 


     </div> 
    </div> 
</div> 

<!-- Step 5 --> 
<div class="formWrap"> 
    <div class="formInner"> 
     <h3 class="formHeader">5. </h3> 
     <div class="box5"> 

     </div> 
    </div> 
</div> 

Answer 1

這裏是我的建議，FWIW：

• 如果沒有其他元素與類的 「盒1」，我會改變 到一個ID。然後，您可以只使用 $('#box1')作爲目標，並且速度會更快。
• 您可以使用delegate()方法來定位「box」元素下的元素。這通常是更高效的
  。所以你最終會得到$('#box1').delegate('li', 'click', function() {});
• 使用上下文來提高你的查詢效率。例如$('.helpTip')將搜索整個DOM，尋找具有「helpTip」類的任何元素。看起來你想要做的只是定位當前框中的「幫助提示」。
• 緩存儘可能多的查詢。

基本上代碼獲取更象：

var $box1 = $('#box1'), 
    $box2 = $('#box2'), 
    $box3 = $('#box3'), 
    $box4 = $('#box4'), 
    $box5 = $('#box5'); 
$box1.delegate('li', 'click', function() { 
    var $this = $(this); 
    $('.helpTip', $this).fadeOut().remove(); 
    $box2.append('<div class="helpTip">Step 2. <span>text</span></div>'); 
}); 

等等...

Answer 2

對於初學者來說，存儲在變量的jQuery的背景下，第二次使用的代表，直播或用於連接事件新。

例如

var box1 = $('.box1'); 
    var box2 = $('.box2'); 

    box1.append('<div class="helpTip">Step 1. <span>text</span></div>'); 

    $('li', box1).on("click", function() { 
     $('.helpTip').fadeOut().remove(); 
     box2.append('<div class="helpTip">Step 2. <span>text</span></div>'); 
    }); 
... 

你也可以這樣做：

var box1 = $('.box1'); 
var box2 = $('.box2'); 
var box3 = $('.box3'); 
var box4 = $('.box4'); 
var box5 = $('.box5'); 

$('.box1 li, .box2 p, .box3 div, .box4 div, .box5').on("click", function() { 
    var currentContext = $(this); 
     $('.helpTip', currentContext).fadeOut().remove(); 

    if (currentContext.hasClass(".box5")) { 
     // Do something to the submit button   
    } 
    else { 
     // write some method to figure out which box to append help to. 
    } 
}); 

Answer 3

不能你循環throught包含元素的數組？是這樣的：

var appended = ['Step 1. <span>text</span>', 
      'Step 2. <span>text</span>', 
      'Step 3. <span>text</span>', 
      'Step 4. <span>text</span>', 
      'Step 5. <span>text</span>' 
      ]; 
var selector = ['.box1 li','.box2 div','.box3 div','.box4 div','.box5'] 
var help = $('.helpTip'); 
function fader(){ 
    help.fadeOut().remove(); 
} 
$('.box1').append('<div class="helpTip">'+appended[0]+'</div>'); 
var i = 0; 
var box = '.box'; 
$(selector[i]).live('click',function(){ //if the elements already exist you should use .click or bind('click')wasn't sure if this was the situation 

    app = box+(i+2); 
    if (app === '.box5'){ 
     fader(); 
    } else { 
     fader(); 
     $(app).append('<div class="helpTip">'+appended[i+1]+'</div>') 
     i++;  
    } 


}) 

對不起，我可以測試這個（時間不夠我從你身邊HTML的側面和缺乏..更好地附着於這樣的問題上的jsfiddle）所以基本上這是僞代碼。不知道這會優化速度（這已經覆蓋了@ Mike-McCaughan的答案），但如果這個列表更長，也會保持乾爽。

如果你關注@麥克 - McCaughan很好的建議，則「選擇」陣列可以被刪除，該函數的開頭應accordingally改變