JQuery модификации, легкость скрыть / показать и мой синтаксис отстой - PullRequest
0 голосов
/ 23 января 2012

Наконец-то появилось меню прокрутки для клиента, и теперь он хочет, чтобы это была ситуация show () hide (). Я не достаточно разбираюсь в jquery, чтобы делать что-либо кроме использования как legos.

Моей первой мыслью было: «Это будет легко». Я просто поменяю анимацию на шоу или спрячу. Итак, я попробовал:

if (idx > current) {
    $current.show()
    $next.hide()
}
elseif { ... }

У кого-нибудь есть быстрые указатели? Это оригинальный код:

$(function() {

    //caching
    //next and prev buttons
    var $cn_next    = $('#cn_next');
    var $cn_prev    = $('#cn_prev');
    //wrapper of the left items
    var $cn_list     = $('#cn_list');
    var $pages        = $cn_list.find('.cn_page');
    //how many pages
    var cnt_pages    = $pages.length;
    //the default page is the first one
    var page        = 1;
    //list of news (left items)
    var $items         = $cn_list.find('.cn_item');
    //the current item being viewed (right side)
    var $cn_preview = $('#cn_preview');
    //index of the item being viewed. 
    //the default is the first one
    var current        = 1;

    /*
    for each item we store its index relative to all the document.
    we bind a click event that slides up or down the current item
    and slides up or down the clicked one. 
    Moving up or down will depend if the clicked item is after or
    before the current one
    */
    $items.each(function(i){
        var $item = $(this);
        $item.data('idx',i+1);

        $item.bind('click',function(){
            var $this = $(this);
            $cn_list.find('.selected').removeClass('selected');
            $this.addClass('selected');
            var idx      = $(this).data('idx');
            var $current = $cn_preview.find('.cn_content:nth-child('+current+')');
            var $next    = $cn_preview.find('.cn_content:nth-child('+idx+')');

            /* ITEM SCROLLING */

            /* DOWN THE LIST */
            if(idx > current){
                $current.stop().animate({'top':'-1000px'},600,'linear',function(){
                    $(this).css({'top':'1000px'});
                });
                $next.css({'top':'1000px'}).stop().animate({'top':'5px'},600,'linear');
            }  
            /* UP THE LIST */
            else if(idx < current){
                $current.stop().animate({'top':'1000px'},600,'linear',function(){
                    $(this).css({'top':'1000px'});
                });
                $next.css({'top':'-1000px'}).stop().animate({'top':'5px'},600,'linear');
            }
            current = idx;
        });
    });

});

1 Ответ

0 голосов
/ 23 января 2012

Вот указатель: повторное использование «var» повторяется и не нужно.

var $cn_next = $('#cn_next'),
    $cn_prev = $('#cn_prev'),
    $cn_list = $('#cn_list'),
    $pages = $cn_list.find('.cn_page'),
    cnt_pages = $pages.length,
    page = 1,
    $items = $cn_list.find('.cn_item'),
    $cn_preview = $('#cn_preview'),
    current = 1;
...