使用 URL 哈希触发现有 jquery

Posted 2023-03-29

【中文标题】使用 URL 哈希触发现有 jquery

【英文标题】：Trigger existing jquery with URL hash

【发布时间】：2021-03-01 03:57:33

【问题描述】：

我在页面上有任何现有的 jQuery，它会根据 onclick 选择更改布局/砌体。内容包括关于广告、音乐和摄影的部分。我想在使用 url 哈希时运行相同的功能。

例如。 foo.com/#advertising 将运行此特定功能；

$('#show_advertising').click(function() 
    $('.advertisingon').slideDown('fast', function() 
        $masonry.masonry();
    );
    $('.advertisingoff').slideUp('fast', function() 
        $masonry.masonry();
    );
);

这是完整的查询。

<script>
(function ($) 
    $(document).ready(function()
var $masonry = $('#masonry-content_fmzq1ep27, #masonry-content_HomeHeadingTy1, #masonry-content_HomeHeadingTy2, #masonry-content_HomeHeadingTy3, #masonry-content_HomeHeadingTy4, #masonry-content_HomeHeadingTy5,#masonry-content_HomeHeadingTy6, #masonry-content_HomeHeadingTy7, #masonry-content_HomeHeadingTy8, #masonry-content_HomeHeadingTy9, #masonry-content_HomeHeadingTy10');
$('#show_all').click(function()   
    $('.allon').slideDown('fast', function() 
        $masonry.masonry();
    );
    );
$('#show_music').click(function() 
    $('.musicon').slideDown('fast', function() 
        $masonry.masonry();
    );
    $('.musicoff').slideUp('fast', function() 
        $masonry.masonry();
    ); 
);
$('#show_advertising').click(function() 
    $('.advertisingon').slideDown('fast', function() 
        $masonry.masonry();
    );
    $('.advertisingoff').slideUp('fast', function() 
        $masonry.masonry();
    );
);
$('#show_photographer').click(function() 
    $('.photographeron').slideDown('fast', function() 
        $masonry.masonry();
    );
    $('.photographeroff').slideUp('fast', function() 
        $masonry.masonry();
    );
);
);
)(jQuery);
</script>   

非常感谢！

【问题讨论】：

window.location.hash 包含当前哈希

谢谢大卫。虽然我不确定如何在此查询中调用该 window.location.hash？

【参考方案1】：

从页面加载：

<script>
$(function()

    var hash = window.location.hash;
    if(hash == "advertising")
    
        //Do advertising code here
    

);
</script>

关于哈希更改：

window.onhashchange = function()

    var hash = window.location.hash;
    if(hash == "advertising")
    
        //Do advertising code here
    

【讨论】：

谢谢大卫。我告诉了以下内容，但这不起作用。我应该修改原始查询还是在新的 window.location.has 函数中再次复制相同的查询。

我会把你的代码变成一个函数并在两个地方调用这个函数。这样你就不会重复代码。

谢谢大卫。说得通。虽然我很害怕，但它还没有达到那个水平。不确定如何将其定义为更大查询内部或外部的函数。

【参考方案2】：

我尝试根据您的建议在原始完整查询下方添加此内容...

$(函数()

var hash = window.location.hash;
if(hash == "advertising")

$('#show_advertising').click(function() 
    $('.advertisingon').slideDown('fast', function() 
        $masonry.masonry();
    );
    $('.advertisingoff').slideUp('fast', function() 
        $masonry.masonry();
    );
);

);

【讨论】：

.click(function() 将内部函数绑定到选定元素的点击事件。只做内部部分。 .slidedown 和 .slideup 部分

感谢您的帮助大卫！非常感激。不过今天我可能有点超出我的深度。还是谢谢！

【参考方案3】：

这就是我现在的情况......不幸的是，在访问 foo.com/#advertising 时仍然没有触发 #show_advertising 功能。 onclick 版本仍然可以正常工作。我觉得它不是上述更大查询的一部分，这意味着它错过了一些重要的元素，例如砌体的“var”。

<script>
(function ($) 
    $(document).ready(function()
var $masonry = $('#masonry-content_fmzq1ep27, #masonry-content_HomeHeadingTy1, #masonry-content_HomeHeadingTy2, #masonry-content_HomeHeadingTy3, #masonry-content_HomeHeadingTy4, #masonry-content_HomeHeadingTy5,#masonry-content_HomeHeadingTy6, #masonry-content_HomeHeadingTy7, #masonry-content_HomeHeadingTy8, #masonry-content_HomeHeadingTy9, #masonry-content_HomeHeadingTy10');
$('#show_all').click(function()   
    $('.allon').slideDown('fast', function() 
        $masonry.masonry();
    );
    );
$('#show_music').click(function() 
    $('.musicon').slideDown('fast', function() 
        $masonry.masonry();
    );
    $('.musicoff').slideUp('fast', function() 
        $masonry.masonry();
    ); 
);
$('#show_advertising').click(function() 
    $('.advertisingon').slideDown('fast', function() 
        $masonry.masonry();
    );
    $('.advertisingoff').slideUp('fast', function() 
        $masonry.masonry();
    );
);
$('#show_photographer').click(function() 
    $('.photographeron').slideDown('fast', function() 
        $masonry.masonry();
    );
    $('.photographeroff').slideUp('fast', function() 
        $masonry.masonry();
    );
);
);
)(jQuery);
</script>

$(函数() var hash = window.location.hash; if(hash == "广告") $('#show_advertising') $('.advertisingon').slideDown('fast', function() $masonry.masonry(); ); $('.advertisingoff').slideUp('fast', function() $masonry.masonry(); ); ); );