重构/优化大块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改变