Question

最后为客户提供了一个滚动菜单，现在希望它成为show（）hide（）情况。除了像legos一样使用它之外我还不清楚jquery做什么。

我的第一个想法是，“这很容易”我只是将动画改为演出或隐藏。所以我试过了：

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

});

Answer 1

这是一个指针：一遍又一遍地使用“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;

jquery修改，易于隐藏/显示和我的语法很糟糕

1 个答案: