Question

尝试非常难以理解jQuery BBQ并且做得不好。我需要弄清楚一些事情，但我会尝试把重点放在我认为最重要的事情上，希望能够帮助我解决其他问题。

我有一个页面，其中包含三个隐藏的部分。当用户单击导航链接时，相应的部分将展开，其他部分（如果处于活动状态）将被隐藏。使用表示页面的哈希更新URL。因此localhost变为localhost/#work。在我的代码中，这可以正常工作。

在#work部分中，有多个缩略图对应不同的视频，我正在尝试将值添加到URL中以允许书签和其他爱，因此使用jQuery BBQ。这种作品，网址变得丑陋的一个小问题。 localhost变为localhost/#work=&misery=。丑陋，但它已正确更新（并且该部分保持打开状态）。

这是货物：

当发生hashchange事件时，我的超级duper hash-bash函数会运行并检查URL的哈希值，然后打开相应的部分。 如何使用jQuery BBQ的.getState()方法，我可以从网址中提取视频值，然后点击该缩略图吗？

非常感谢，我知道这是漫长的啰嗦，但我希望尽可能清晰和具有描述性。请在下面找到一个jsFiddle（虽然我在这个环境中根本无法显示哈希...呃！）以及原始代码。

http://jsfiddle.net/danielredwood/n2KWv/2/

JavaScript的：

function navi(){
var hash = window.location.hash,
    hspl = hash.split('=')[0],
    acti = $('.out')
    test = $.bbq.getState();

    console.log(test);

    if (!$('body').hasClass('work')){
        acti.removeClass('out').slideUp(400);

        $(hash).addClass('out').slideDown(400);        
    } else {
        if (hspl != '#work') {
            $('body').removeClass('work');

            acti.removeClass('out').slideUp(400);

            $(hash).addClass('out').slideDown(400);
        }
    }
}

/* Nav */

$(window).bind('hashchange', function(){
    navi();
});

/* Thumbnail Clicks */

$('.thumbnail a').click(function(){
    $('body').addClass('work');

    var name = $(this).attr('id');

    $.bbq.pushState(name);                

    return false;
});

Answer 1

不是将“show_video”事件作为每个链接的onClicks放置，而是可以使用单独的show_video函数来显示id。然后，您可以使用jsbbq添加多个哈希状态属性，然后测试它们的存在并相应地执行操作。

所以你可以这样做：

function show_video(vid_id) {
    ...
}

$('.thumbnail a').click(function(){
    ...
    var name = $(this).attr('id');

    $.bbq.pushState({'view':'work', 'video':name});                
    ...

    return false;
});

$(window).bind('hashchange', function(){
    var state = $.bbq.getState();
    if (state['view'] === 'work'){
        var vid_id = state['video'];
        show_video(vid_id);
    } else {
       ...
    }
}

您可能还想阅读$ .bbq.push_state（..）函数的* merge_mode *属性。它允许您只覆盖特定的哈希状态值或重写整个哈希状态。

http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.bbq.pushState

jQuery BBQ将URL状态拆分为可用的块

1 个答案: