如何使用来自外部链接的散列值来定位点击事件 [英] How to target a click event using hash value from external link

问题描述

我使用以下插件创建了一个图库画廊页面：

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

我已经按照预期工作但我想添加另一个功能，但我很努力想弄明白，我真的很感激任何帮助。

下面是一个jsfiddle，展示了一个带有开放函数的基本版本工作：

http://jsfiddle.net/yfmm6q0o/

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

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

  window.location.hash; 
  

通过使用字符串替换，我可以将loc-添加到散列值并滚动该页面的ID，这个工作很好，但我想预览部分打开以及。

有没有办法将散列值链接到以下函数：

 函数initItemsEvents（$ items）{
 $ items.on（'click'，'span.og-close' ，function（）{
 hidePreview（）; 
 return false; 
}）.children（'a'）.on（'click'，function（e）{
 
 var $ item = $（this）.parent（）; 
 //检查是否已打开项目
当前=== $ item.index（）？hidePreview（）：showPreview（$ item ）; 
返回false; 
 
}）; 
} 
  

这意味着如果页面加载了＃item-2散列值，它会触发一个点击事件或模拟点击第二项，打开预览。

预先感谢您的帮助。

解决方案

我会沿着这些方向设置它： /hash/hashTest.htmlrel =nofollow>工作演示

jQuery：

  $（function（）{
 //给所有元素一个类并绑定一个处理函数
 $（'。点击（function（）{
 alert（'button'+ $（'。myBtns'）。index（$（this））+'使用来自url的散列点击）
}）; 
 //获取加载时的散列
 var hash = window.location.hash.replace（/^.*?(# | $）/，''）; 
 //如果（hash！=''）$（'。m如果你希望在页面上捕获更改，或者将它保留在外
 $（window）.bind（'hashchange'）。eq（hash）.click（）; 
 //绑定到hashchange '，function（e）{
 var hash = e.target.location.hash.replace（/^.*?(# | $）/，''）; 
 $（'。myBtns'）。eq（hash）.click（）; 
}）; 
}）; 
  

HTML

 < h3>转到：< a href =http://dodsoftware.com/sotests/hash/hashTest.html#0> http：// dodsoftware。 COM / sotests /散列/ hashTest.html＃0; / A>查看基于网址哈希点击的第一个按钮。< / h3> 
< h3>转到：< a href =http://dodsoftware.com/sotests/hash/hashTest.html#1>> http：//dodsoftware.com/sotests/hash/hashTest html的＃1·; / A>查看基于网址哈希点击的第一个按钮。< / h3> 
< h3>转到：< a href =http://dodsoftware.com/sotests/hash/hashTest.html#2>>> http：//dodsoftware.com/sotests/hash/hashTest html的＃2'; / A>查看基于网址哈希点击的第二个按钮。< / h3> 
< h3>转到：< a href =http://dodsoftware.com/sotests/hash/hashTest.html#3>>> http：//dodsoftware.com/sotests/hash/hashTest html的＃3'; / A>查看基于网址哈希点击的第二个按钮。< / h3> 
< input type =buttonclass =myBtnsvalue =我点击了网址的散列/> 
< input type =buttonclass =myBtnsvalue =我点击了网址的散列/> 
< input type =buttonclass =myBtnsvalue =我点击了网址的散列/> 
< input type =buttonclass =myBtnsvalue =我点击了网址的散列/> 
  

I've built a image gallery page using the following plugin found from a codrop article:

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

I've got the gallery working as intended but I would like to add another feature but I'm struggling to figure out and I would really appreciate any help.

Here's a jsfiddle showing a basic version with the open function working:

http://jsfiddle.net/yfmm6q0o/

Using Hash values loaded from external links I would like the page to load and automatically open the preview, depending on the hash value (for example www.page.com#item-2 would open the second item preview).

I was able to set the hash value using:

window.location.hash;

And by using the string replace I was able to add 'loc-' to the hash value and scroll the page to that ID, this worked great but I would like preview section to open as well.

Is there a way to link the hash value to the following function:

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;

    } );
}

Meaning if the page loaded with #item-2 hash value it would fire a click event or simulate a click on the second item, opening the preview.

Thanks in advance for any help.

解决方案

I would set it up along these lines:

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

这篇关于如何使用来自外部链接的散列值来定位点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！