使用 URL 哈希触发现有 jquery答案

【问题标题】：Trigger existing jquery with URL hash使用 URL 哈希触发现有 jquery
【发布时间】：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？

标签： jquery url 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(); }); }); } });

【讨论】：