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

Question

我使用从 codrop 文章中找到的以下插件构建了一个图片库页面:

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

我已经让画廊按预期工作，但我想添加另一个功能，但我正在努力弄清楚，我真的很感激任何帮助。

这是一个 jsfiddle，显示了一个基本版本，其中 open 函数可以正常工作:

http://jsfiddle.net/yfmm6q0o/

使用从外部链接加载的哈希值我希望页面加载并自动打开预览，具体取决于哈希值(例如 www.page.com#item-2 将打开第二个项目预览)。

我能够使用以下方法设置哈希值:

window.location.hash;

通过使用字符串替换，我能够将“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 哈希值，它将触发点击事件或模拟点击第二个项目，打开预览。

在此先感谢您的帮助。

Answer 1

我会按照以下方式设置它:

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"/>