javascript - 如何使用外部链接中的哈希值定位点击事件

我使用在codrop文章中找到的以下插件构建了图片库页面：

http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

我的画廊已按预期工作，但我想添加另一个功能，但我一直在努力寻找答案，我将非常感谢您的帮助。

这是一个jsfiddle，显示了具有开放功能的基本版本：

http://jsfiddle.net/yfmm6q0o/

使用从外部链接加载的哈希值，我希望页面加载并根据哈希值自动打开预览（例如，www.page.com＃item-2将打开第二项预览）。

我可以使用以下方法设置哈希值：

window.location.hash;

通过使用字符串replace，我可以将'loc-'添加到哈希值并将页面滚动到该ID，效果很好，但是我也希望打开预览部分。

有没有一种方法可以将哈希值链接到以下函数：

function initItemsEvents( $items ) {
    $items.on( 'click', 'span.og-close', function() {
        hidePreview();
        return false;
    } ).children( 'a' ).on( 'click', function(e) {

        var $item = $( this ).parent();
        // check if item already opened
        current === $item.index() ? hidePreview() : showPreview( $item );
        return false;

    } );
}

这意味着如果页面加载有＃item-2哈希值，它将触发点击事件或模拟对第二个项目的点击，从而打开预览。

在此先感谢您的帮助。

最佳答案

我将按照以下方式进行设置：

Working Demo

jQuery的：

   $(function() {
         // give all of your elements a class and bind a handler to them
         $('.myBtns').click(function() {
            alert('button ' +$('.myBtns').index($(this))+ ' was clicked using the hash from the url ')
         });
         // get the hash on load
         var hash = window.location.hash.replace(/^.*?(#|$)/,'');
          // click one of the elements based on the hash
         if(hash!='')$('.myBtns').eq(hash).click();
        // bind to hashchange if you want to catch changes while on the page, or leave it out
         $(window).bind('hashchange', function(e) {
            var hash = e.target.location.hash.replace(/^.*?(#|$)/,'');
            $('.myBtns').eq(hash).click();
         });
    });

的HTML

<h3>Navigate to: <a href="http://dodsoftware.com/sotests/hash/hashTest.html#0">http://dodsoftware.com/sotests/hash/hashTest.html#0</a> to see the first button clicked based on the url hash.</h3>
<h3>Navigate to: <a href="http://dodsoftware.com/sotests/hash/hashTest.html#1">http://dodsoftware.com/sotests/hash/hashTest.html#1</a> to see the first button clicked based on the url hash.</h3>
<h3>Navigate to: <a href="http://dodsoftware.com/sotests/hash/hashTest.html#2">http://dodsoftware.com/sotests/hash/hashTest.html#2</a> to see the second button clicked based on the url hash.</h3>
<h3>Navigate to: <a href="http://dodsoftware.com/sotests/hash/hashTest.html#3">http://dodsoftware.com/sotests/hash/hashTest.html#3</a> to see the second button clicked based on the url hash.</h3>
<input type="button" class="myBtns" value="I get clicked by the url's hash"/>
<input type="button" class="myBtns" value="I get clicked by the url's hash"/>
<input type="button" class="myBtns" value="I get clicked by the url's hash"/>
<input type="button" class="myBtns" value="I get clicked by the url's hash"/>