如何在WordPress的JS脚本中通过数组变量调用页面锚点？

问题描述 #

我是JS新手，在WordPress里用脚本实现点击封面流（coverflow）风格轮播面板时显示对应页面模块，靠CSS类控制面板显隐。目前功能正常，但点击非居中面板时，对应模块会显示，可轮播面板不动。我可以通过面板上的页面锚点定位到正确的轮播面板，硬编码HTML链接能正常工作，但需要在JS里调用这个锚点。现有代码用变量数组存各状态，比如点击mtc_button_1时，隐藏mtc_element_2、_3、_4、_5并显示mtc_element_1。想问能不能在数组里加额外字段来调用页面锚点？我猜可以用window.location.href，但不确定正确语法。

原代码：

jQuery(function($){
    var buttons = {
    '.mtc_button_1': {
        'toggle': '', 
        'hide'  : '.mtc_element_2,.mtc_element_3, .mtc_element_4, .mtc_element_5', 
        'show'  : '.mtc_element_1',
        //'panel' : '#panel1'

    },
    '.mtc_button_2': {
        'toggle': '', 
        'hide'  : '.mtc_element_1,.mtc_element_3, .mtc_element_4, .mtc_element_5', 
        'show'  : '.mtc_element_2',
        //'panel' : '#panel2'


    },
    '.mtc_button_3': {
        'toggle': '', 
        'hide'  : '.mtc_element_1,.mtc_element_2, .mtc_element_4, .mtc_element_5', 
        'show'  : '.mtc_element_3',
        //'panel' : '#panel3'
    },
    '.mtc_button_4': {
        'toggle': '', 
        'hide'  : '.mtc_element_1,.mtc_element_2, .mtc_element_3, .mtc_element_5', 
        'show'  : '.mtc_element_4',
        //'panel' : '#panel4'

    }
        
};
    $.each(buttons, function(button, elements) { //assume I need ,panel_choice here
        $(button).click(function(e){
            e.preventDefault();
            $(elements.toggle).slideToggle();
            $(elements.hide).fadeOut( 200 );
            $(elements.show).delay( 200 ).fadeIn( 200 );
            $(button).toggleClass('mtc_button_opened mtc_button_closed');
            //$(panel_choice.window.location.href) = panel;
        });
    });
});

解决方案 #

完全可以在按钮配置数组里新增panel字段存储锚点，然后在点击事件里处理锚点跳转。这里提供两种实用方式：

方式1：通过URL Hash触发锚点定位（适合依赖锚点的轮播） #

把注释掉的panel字段放开，然后用window.location.hash设置锚点（不会刷新页面）：

jQuery(function($){
    var buttons = {
        '.mtc_button_1': {
            'toggle': '', 
            'hide'  : '.mtc_element_2,.mtc_element_3, .mtc_element_4, .mtc_element_5', 
            'show'  : '.mtc_element_1',
            'panel' : '#panel1'
        },
        '.mtc_button_2': {
            'toggle': '', 
            'hide'  : '.mtc_element_1,.mtc_element_3, .mtc_element_4, .mtc_element_5', 
            'show'  : '.mtc_element_2',
            'panel' : '#panel2'
        },
        '.mtc_button_3': {
            'toggle': '', 
            'hide'  : '.mtc_element_1,.mtc_element_2, .mtc_element_4, .mtc_element_5', 
            'show'  : '.mtc_element_3',
            'panel' : '#panel3'
        },
        '.mtc_button_4': {
            'toggle': '', 
            'hide'  : '.mtc_element_1,.mtc_element_2, .mtc_element_3, .mtc_element_5', 
            'show'  : '.mtc_element_4',
            'panel' : '#panel4'
        }
    };

    $.each(buttons, function(buttonSelector, config) {
        $(buttonSelector).click(function(e){
            e.preventDefault();
            // 保留原有显隐逻辑
            $(config.toggle).slideToggle();
            $(config.hide).fadeOut(200);
            $(config.show).delay(200).fadeIn(200);
            $(this).toggleClass('mtc_button_opened mtc_button_closed');
            
            // 新增锚点处理逻辑
            if (config.panel) {
                // 设置hash触发锚点定位，无页面刷新
                window.location.hash = config.panel;
            }
        });
    });
});

方式2：调用封面流插件API（推荐，无URL变化） #

如果你的封面流插件提供了滚动到指定面板的API（比如scrollTo、activatePanel这类方法），直接调用比修改URL更优雅。假设插件实例挂载在元素的data属性上，示例代码：

// 在点击事件的锚点处理部分替换为：
if (config.panel) {
    // 假设封面流容器类是.coverflow，插件有scrollTo方法接收面板选择器
    $('.coverflow').data('coverflow').scrollTo(config.panel);
}

关键说明 #

• 配置数组里的panel字段直接写锚点选择器（比如#panel1）即可，无需额外处理
• 用window.location.hash比window.location.href更友好，不会触发页面刷新
• 优先使用插件自带API，避免URL变化影响用户体验，同时能更精准控制轮播行为

内容的提问来源于stack exchange，提问作者user3717457