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

请帮我纠正这个糟糕的代码。我的要求是有很多div的id以BoxHelpMain开头，有一个按钮HelpBoxOk。现在点击helpBoxOk我希望它在整个doc中搜索下一个BoxHelpMain并淡出当前的BoxHelpMain并淡出下一个BoxHelpMain。如果没有其他div存在，则只淡出当前的

这些div中没有一个是兄弟姐妹，而且分散在dom

Answer 1

首先，将所有BoxHelpMain*个div放在同一个类中：

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

假设所有这些元素都在DOM层次结构中的相同级别（即它们都是兄弟姐妹），找到 next ，然后减少到：

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

然后如上所述淡出。

Jquery淡入 - 淡出帮助

1 个答案: