Jqueryフェードイン - ヘルプのフェードアウト

Question

$('.HelpBoxOk').live('click',function() 
{ 
    var BoxHelpMain = $(this).parent().parent().parent().parent().parent().parent(); 

    var ShouldFadeIn = false; //if the button says next then there is more divs to fadein if it says ok then no more divs to fade in i.e end of divs 
    if($(this).attr('value') == 'Next') 
    { 
     ShouldFadeIn = true; 
    } 

    BoxHelpMain.fadeOut().queue(function() //fadeout the current div 
    { 
     if(ShouldFadeIn == true) // if it should fade in next div 
     { 
      FadeinNextDiv = false; 
      AllBoxHelpMain = $(document).find("[id^=BoxHelpMain]"); // find all div with the same id as current one 

      if(AllBoxHelpMain.length) // if any divs with id exists 
      { 
       AllBoxHelpMain.each(function() // loop through all the divs 
       { 
        if(FadeinNextDiv == true) // if we need to fade in the next div 
        { 
         $(this).fadeIn(); 
        $(this).find("input[class^=HelpBoxOk]:first").focus();  // fade in the div   
         FadeinNextDiv = false; 
         return false; 
        } 
        if($(this).attr('id') == BoxHelpMain.attr('id')) // if current div id matches the clicked box/div then the next box/div needs to be fadded in 
        {      
         FadeinNextDiv = true; 
        } 
       })   
      } 
     } 
    }); 
    return false; 
}); 

この虚偽のコードを修正するのを手伝ってください。私の要件は、idがBoxHelpMainで始まり、ボタンHelpBoxOkを持つ多くのdivがあることです。 helpBoxOkをクリックすると、ドキュメント全体の次のBoxHelpMainを検索し、現在のBoxHelpMainをフェードアウトし、次のBoxHelpMainをフェードインします。仮定すると、

<div id="BoxHelpMain1" class="boxhelp"> 

：他のdivが存在しない場合は、あなたのBoxHelpMain* div要素のすべてを与え、同じクラスをそしてちょうどのdivが兄弟である論文の現在の1

Noneをフェードアウトしないと

Answer 1

まずDOMに散在そのようなすべての要素はと同じ DOM階層内にあります（つまり、すべての兄弟です）。次はです。

var current = $(this).closest('.boxhelp');   // find button's parent 
var next = $(current).nextAll('.boxhelp').first(); // find next .boxhelp 

そして、あなたのフェージングだけで次のようになります。

$(current).fadeOut(function() { 
    $(next).fadeIn(); // called when the .fadeOut() completes 
}); 

nextが存在するかどうかをチェックする必要はありません - jQueryのは、ちょうど空のリストを無視します。

var $current = $(this).closest('.boxhelp'); // find button's parent 
var $next = $();        // an empty jQuery object 

var $all = $('.boxhelp'); 
for (var i = 0; i < $all.length - 1; ++i) { 
    if ($all.get(i).is($current)) { 
     $next = $all.get(i + 1); 
     break; 
    } 
} 

をし、その後、上記のようにフェードアウト：

彼らはない兄弟をしている場合は、これを試してみてください。