0

非常努力地理解 jQuery BBQ 并且做得不好。有几件事情我需要弄清楚，但我会试着把重点放在我认为最重要的事情上，希望剔除那部分会引导我解决其他问题。

我有一个页面，其中包含三个部分，每个部分都是隐藏的。当用户单击导航链接时，相应的部分会展开，而其他部分（如果处于活动状态）则被隐藏。URL 使用代表页面的哈希值进行更新。就这样localhost变成了localhost/#work。在我的代码中，这可以正常工作。

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

这是货物：

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

非常感谢，我知道那是冗长的，但我希望尽可能清晰和描述性。请在下面找到一个 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;
});

​</p>

4

1 回答 1

0

除了将“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

于 2012-07-26T17:23:35.380 回答