Question

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

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

我让画廊按预期工作，但我想添加另一个功能，但我很难弄明白，我真的很感激任何帮助。

这是一个jsfiddle，显示了open函数的基本版本：

使用从外部链接加载的哈希值我希望页面加载并自动打开预览，具体取决于哈希值（例如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

所以，您可能想尝试以下方法。请在代码中查看详细信息。

//Let's say the hash is "#item-2" and always has a >0 number (i.e. #item-1, #item-2 and #item-n) at the end.
var indexFromHash = parseInt("#item-2".split("-").pop(), 10) - 1;
//this would trigger click and invoke
//$items.on( 'click', 'span.og-close', function() { part of your code
$items.eq(indexFromHash).find('span.og-close').trigger("click");
//this would trigger click and invoke
//}).children('a').on('click', function(e) { part of your code
$items.eq(indexFromHash).children('a').trigger("click");

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

如何使用外部链接的哈希值来定位单击事件

2 个答案:

Working Demo