使用箭头在我的画廊中导航时更改 URL 中的哈希 (jQuery)答案

【问题标题】：Change hash in URL when using arrows to navigate in my gallery (jQuery)使用箭头在我的画廊中导航时更改 URL 中的哈希 (jQuery)
【发布时间】：2012-08-22 02:28:41
【问题描述】：

我在 jQuery 中有一个画廊 Elastislide。

图片得到一个哈希值。当我单击缩略图时，会出现哈希。但是当我单击箭头或使用键盘上的箭头键导航时，哈希不会改变。

这是 JavaScript 代码：

        $('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).prependTo( $rgGallery );

            if( itemsCount > 1) {
                // addNavigation
                var $navPrev        = $rgGallery.find('a.rg-image-nav-prev'),
                    $navNext        = $rgGallery.find('a.rg-image-nav-next'),
                    $imgWrapper     = $rgGallery.find('div.rg-image');

                $navPrev.on('click.rgGallery', function( event ) {
                    _navigate( 'left' );
                    return false;
                }); 

                $navNext.on('click.rgGallery', function( event ) {
                    _navigate( 'right' );
                    return false;
                });

                // add touchwipe events on the large image wrapper
                $imgWrapper.touchwipe({
                    wipeLeft            : function() {
                        _navigate( 'right' );
                    },
                    wipeRight           : function() {
                        _navigate( 'left' );
                    },
                    preventDefaultEvents: false
                });

                $(document).on('keyup.rgGallery', function( event ) {
                    if (event.keyCode == 39)
                        _navigate( 'right' );
                    else if (event.keyCode == 37)
                        _navigate( 'left' );    
                });

            }

        },
        _navigate       = function( dir ) {

            // navigate through the large images

            if( anim ) return false;
            anim    = true;

            if( dir === 'right' ) {
                if( current + 1 >= itemsCount )
                    current = 0;
                else
                    ++current;
            }
            else if( dir === 'left' ) {
                if( current - 1 < 0 )
                    current = itemsCount - 1;
                else
                    --current;
            }

            _showImage( $items.eq( current) );

        },

【问题讨论】：

你试过用window.location.hash='myhash'改变它吗？
Have a look here。关键是window.location.hash = this.hash;

标签： javascript jquery url hash

【解决方案1】：

我使用 jquery bbq 取得了很大的成功：http://benalman.com/projects/jquery-bbq-plugin/

您可以推送特定的哈希值、替换整个内容或任何您喜欢的内容。

它还允许您处理/监控 hashchange 事件。

【讨论】：