Question

好的，所以我有一些javascript（jQuery），我觉得有点臃肿，我想知道是否有更好的方法来编码它，代码基本上做了以下第一堂课的传记显示，其余的都是隐藏的，然后用户点击并成像，从中我们得到索引编号并找出图像所属的.biography我们然后将旧文本设置为动画，下面的新内容是我认为的是一个非常混乱的代码，并想知道是否有一个qiucker方式来实现我正在做的事情？

    $('.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>

Answer 1

IMO，代码似乎很好。只有我注意到的事情：

$('.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个孩子的时间。

Answer 2

我认为这可以更有效地完成。我怀疑jQuery lint（或FireQuery，如果你使用的是FireBug）会给你一些警告，不止一次使用相同的选择器，并使用只有类的选择器。如果您发布了实际呈现的HTML，我们就会更容易“优化”，或者甚至更好地创建一个我们可以使用的jsFiddle。

帮助整理一些jquery

2 个答案: