Javascript 帮助整理一些jquery

好的，我有一些javascript（jQuery），我觉得有点臃肿，我想知道是否有更好的方法来编码它，代码基本上做了以下的第一个类与传记显示，其余的是隐藏的，用户然后点击和图像，从中我们得到索引号并计算出图像属于哪个

。传记

，然后我们将旧文本输出，新文本输入，下面是我认为非常混乱的代码，我想知道是否有一种方法可以实现我正在做的事情

    $('.biography:first').show().addClass('visible');
            $('.biography:not(.visible)').css("top", "300px");
            $('.the-team img').click(function(){
                var clickedImage = $(this);
                $('.visible').animate({"top" : $('.the-team').height()+10 }, 1000).removeClass('visible').fadeOut(5);
                var indexToShow = clickedImage.index() + 1;
                if(indexToShow == 1) {
                    indexToShow = 2;
                } else if(indexToShow == 5) {
                    indexToShow = 4;
                } else if(indexToShow == 7) {
                    indexToShow = 5;
                }
                $('.biography:nth-child('+indexToShow+')').addClass('visible').show();
                $('.biography:nth-child('+indexToShow+')').animate({"top" : "123px"}, 1000);
            });

我刚刚做了一些x浏览器测试，很明显网站浏览器的索引设计与基于moz的浏览器不同，有人能帮我吗

下面是我的HTML标记

<article class="the-team">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <?php if($post->ID == 15) : ?>
                <h1>your team</h1>
            <?php else: ?>
                <h1><?php the_title(); ?></h1>
            <?php endif;?>
            <?php the_content(); ?>
        <?php endwhile; endif;?>
        <section>
        <?php query_posts('post_type=team&order=ASC'); ?>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <?php the_post_thumbnail(); ?>
            <article class="biography">
                <h3><?php the_title(); ?></h3>
                <?php the_content(); ?>
            </article>
        <?php endwhile;  endif; ?>
        </section>
    </article>

你的团队

在我看来，代码似乎很好。我唯一注意到的是：

$('.biography:nth-child('+indexToShow+')').addClass('visible').show();
$('.biography:nth-child('+indexToShow+')').animate({"top" : "123px"}, 1000);

可更改为：

$('.biography:nth-child('+indexToShow+')').addClass('visible').show().animate({"top" : "123px"}, 1000);

---

这将节省再次找到第n个孩子的时间。

我认为这可以更有效地完成。我怀疑jQuery lint（如果您使用的是FireBug，则为FireQuery）会给您一些关于多次使用相同选择器以及仅使用类选择器的警告。如果您发布了实际呈现的HTML，或者更好地创建了一个我们可以使用的JSFIDLE，我们将更容易“优化”。如果代码可读且性能相对较好，那么您可能就到此为止了。我认为较小的代码只会让你自己以外的人感到困惑。当然，除非你是作为练习来做的。这段代码看起来非常好。您可以在一行中放置更多命令，但这并不会真正增加任何好处。到目前为止，它的可读性和可维护性都非常好。如果您试图通过减少代码量将过多的逻辑放在一行中，那么也会使代码看起来更神秘，更不易维护。我们的目标是让它尽可能让人可读。这到底是做什么的？if（indexToShow==1）{indexToShow=2；}else if（indexToShow==5）{indexToShow=4；}else if（indexToShow==7）{indexToShow=5；}@mplungjan这组if语句允许我将正确的.bio作为目标，并根据它单击是的，但是为什么要选择看似随机的数字呢？