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开头的div有一个按钮HelpBoxOk。现在，单击 helpBoxOk 我希望它在整个文档中搜索下一个 BoxHelpMain 并淡出当前的 BoxHelpMain 并淡入下一个 BoxHelpMain。如果没有其他 div 存在，则淡出当前 div

这些 div 都不是 sibling 并且分散在 dom 中

Answer 1

首先，为所有 BoxHelpMain* div 指定相同的类:

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

假设所有这些元素都位于 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 将忽略空列表。

如果他们不是 sibling ，请尝试以下操作:

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;
    }
}

然后如上淡出。