使用JQuery切换状态的参数创建URL

时间:2022-01-25 作者:lushiris02

继承了主题,无法联系原始开发人员。在该网站中,有一些切换,用户可以在英文和西班牙文版本的内容之间切换。切换JS包含在“资源”下的主题文件中,如下所示:

$(\'.js-spanish-toggle\').on(\'click\', function() {
    $(this)
        .find(\'button\')
        .toggleClass(\'active\');
    $(this)
        .parents(\'.spanish-container\')
        .toggleClass(\'is-spanish\');
});
有没有一种方法可以改变它来创建URL参数,这些参数可以用来自动指定西班牙语版本应该处于活动状态?它总是默认为英语。例如,在工作列表上,我可以让英文版保留正常的URL路径/careers/job-listing-1,但要在西班牙语上指示和切换状态,我会使用/careers/job-listing#espanol。

1 个回复
最合适的回答,由SO网友:Oleksii 整理而成

您需要处理2个场景:

当页面加载西班牙人哈希时,单击按钮时


    //check for #espanol hash and toggle on page load
    spanishByHash();

    //process toggle on click event
    $(\'.js-spanish-toggle\').on(\'click\', function() {
        hashToggle();
        spanishToggle();        
    });
    
    function spanishToggle() {
         $(\'.js-spanish-toggle\')
             .find(\'button\')
             .toggleClass(\'active\');
         $(\'.js-spanish-toggle\')
             .parents(\'.spanish-container\')
             .toggleClass(\'is-spanish\');
    }

    function hashToggle(){  
        if($(location).prop(\'hash\') === \'#espanol\'){
            $(location).prop(\'hash\',\'\');
        }else{
            $(location).prop(\'hash\',\'#espanol\');
        }   
    }
    
    function spanishByHash(){
        if($(location).prop(\'hash\') === \'#espanol\'){
            spanishToggle();
        }       
    }

相关推荐

一旦getBlock()实际返回POST的块而不是NULL,我如何触发jQuery事件?

在编辑器中,我试图在所有内容加载完毕并准备就绪后,循环浏览当前帖子的所有块。wp.data.select("core/block-editor").getBlocks(); 如果我手动调用它(通过链接/按钮),可以成功获取所有块,但我希望它自动运行。当这个片段在domReady中时,一个lawp.domReady( function() {... getBlocks始终返回null。我也试着用这个承诺wp.domReady( function() { 窗口