使用网址哈希执行点击事件

所以我有一个页面有3个按钮来过滤页面上的内容。使用网址哈希执行点击事件

<section class="solution-filter"> 
    <div class="wrapper"> 
     <button class="fact-sheet" data-target_category="fact-sheet" disabled="">Fact sheet</button> 
     <button class="demo" data-target_category="demo">Demo</button> 
     <button class="apps" data-target_category="apps">Apps and connectors</button> 
    </div><!-- /.wrapper --> 
</section>

我希望能够执行一个按钮点击取决于URL散列。

例如http://example.com/#demo 将在<button class="demo" data-target_category="demo">Demo</button>

if (window.location.hash) { 
    $(document).click($('<button>').data('target_category', (window.location.hash)); 
}

来源

2017-03-01 Aaron

看起来你已经做到了。有什么问题？ –

你可能只是想听'hashchange'事件？ – adeneo

你有正确的想法进行点击，但语法你使用，以提高点击事件是不完全正确。您需要先使用hash值来选择该元素，然后在其上调用click()或trigger('click')。

if (window.location.hash) { 
    $('.' + window.location.hash.substr(1)).click(); 
}

注意，substr()调用用于从字符串的开始删除#。

上述代码将在页面加载时适用于您。如果你也想知道，当页面加载后的哈希值发生变化，你可以使用hashchange事件window的：

$(window).on('hashchange', function() { 
    if (window.location.hash) { 
    $('.' + window.location.hash.substr(1)).click(); 
    } 
});

来源

2017-03-01 11:52:21

我建议添加一个检查是否匹配哈希内容的元素是否真的被发现 - 这样的东西往往会抛出讨厌的错误，否则。 – CBroe

@CBroe即使没有发现任何东西，jQuery仍然会从选择器中返回一个对象。如果没有找到元素，您可以确保上述代码不会产生错误。如果URL中的哈希值不是一个有效的选择器 –

是的，我可能把它与更复杂的情况混淆了（比如你想要初始化一个jQuery插件，$（' .doesnotexist'）。someSlider（...）'，当没有匹配元素时通常会导致错误。）关于无效选择器的好处（可能使用正则表达式来检查它，但另一方面，可能并不真正是必要的，只要你与怪异的哈希链接无关。） – CBroe

你需要得到button然后触发click()，$('<button>')将创建一个jQuery对象不是目标所需元素。

if (window.location.hash) 
    $('button[data-target_category="'+window.location.hash.substr(1)+'"]').click();

来源

2017-03-01 11:52:59 Satpal

使用网址哈希执行点击事件

回答

相关问题