jquery淡入淡出帮助

$('.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，我希望它在整个文档中搜索下一个BoxHelpMain，然后淡出当前的BoxHelpMain并淡化下一个BoxHelpMain。如果没有其他分区存在，则只是淡出论文的div是兄弟的当前jquery淡入淡出帮助

无和散落在DOM

来源

2011-07-15 aWebDeveloper

出于好奇，谁写了的代码？大声笑。虽然它肯定可以调整为optmisation，提供它的工作，这不是那么糟糕_believe me_。那里有各种各样的东西。 POST-EDIT：在重新读取代码后，在第3行，我意识到它是，那么糟糕 – stefgosselin

您的_crappy_ HTML在哪里？ – Shef

首先，给你所有的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将忽略空列表。

如果他们不姐弟，试试这个：

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

然后如上淡出。

来源

2011-07-15 07:39:41 Alnitak

这些div都不是兄弟姐妹，而是分散在各个角落 – aWebDeveloper

jquery淡入淡出帮助

回答

相关问题