如何在原生JavaScript函数中调用jQuery定义的函数以实现筛选器显示/隐藏的循环交互

你遇到的核心问题是show($)函数被定义在jQuery(document).ready()的回调内部，属于局部作用域，所以外部的addStyles()函数无法直接访问到它。而且原来的代码反复删除、重建按钮的逻辑不仅冗余，还容易触发不必要的DOM操作。下面给你两种解决方案，优先推荐更简洁的优化版本：

方案一：重构为切换逻辑（推荐） #

直接用状态切换的思路替代反复删建按钮的操作，代码更简洁，性能也更好：

jQuery(document).ready(function($) {
    // 初始化添加切换按钮
    $(".stm-multiple-select").after('<a id="style-mobile-button" class="button stm-multiple-extend"><span>Розширений фільтр</span></a><br>');

    // 统一管理需要切换的筛选器选择器，后续维护更方便
    const filterElements = [
        '.stm-filter_status',
        '.stm-filter_ca-year',
        '.stm-filter_fuel',
        '.stm-filter_body',
        '.stm-filter_transmission',
        '.filter-price',
        '.stm-filter_co2',
        '.stm-multiple-select'
    ];

    // 绑定按钮点击事件，实现一键切换
    $("#style-mobile-button").on('click', function() {
        const $btn = $(this);
        const $filters = $(filterElements.join(','));

        // 切换筛选器的显示/隐藏状态
        $filters.toggle();

        // 切换按钮文本
        const btnText = $btn.find('span').text();
        $btn.find('span').text(
            btnText === 'Розширений фільтр' ? 'Оптимізувати фільтр' : 'Розширений фільтр'
        );
    });
});

这个方案的优势： #

• 不需要反复删除和创建按钮，只用一个按钮完成状态切换，减少DOM操作开销
• 用jQuery的toggle()方法替代手动循环设置display属性，代码更简洁
• 所有逻辑都封装在jQuery ready回调内，避免作用域冲突问题

方案二：调整作用域解决函数调用问题 #

如果你想保留原有代码结构，只需要把show函数移到全局作用域，让addStyles()可以直接访问：

// 把show函数定义在全局作用域
function show($) {
    $(".stm-multiple-select").after('<a onclick="deleteStyles()" id="style-mobile-button" class="button stm-multiple-extend"><span>Розширений фільтр</span></a>');
}

jQuery(document).ready(function($) {
    // 初始化调用show函数
    show($);
});

function deleteStyles() {
    // 加判断避免元素不存在时报错
    let myobj = document.getElementById("style-mobile");
    if (myobj) myobj.remove();
    
    let mybutton = document.getElementById("style-mobile-button");
    if (mybutton) mybutton.remove();
    
    jQuery(document).ready(function($) {
        $(".stm-multiple-select").after('<a onclick="addStyles()" id="style-mobile-button1" class="button stm-multiple-extend"><span>Оптимізувати фільтр</span></a>');
    });
};

function addStyles(){
    // 现在可以直接调用全局的show函数，传入jQuery对象
    show(jQuery);
    
    // 原有筛选器隐藏逻辑
    var status = document.getElementsByClassName('stm-filter_status');
    for(var i=0; i<status.length; i++)status[i].style.display='none';
    
    var ca_year = document.getElementsByClassName('stm-filter_ca-year');
    for(var i=0; i<ca_year.length; i++)ca_year[i].style.display='none';
    
    var fuel = document.getElementsByClassName('stm-filter_fuel');
    for(var i=0; i<fuel.length; i++)fuel[i].style.display='none';
    
    var body = document.getElementsByClassName('stm-filter_body');
    for(var i=0; i<body.length; i++)body[i].style.display='none';
    
    var transmission = document.getElementsByClassName('stm-filter_transmission');
    for(var i=0; i<transmission.length; i++)transmission[i].style.display='none';
    
    var price = document.getElementsByClassName('filter-price');
    for(var i=0; i<price.length; i++)price[i].style.display='none';
    
    var co2 = document.getElementsByClassName('stm-filter_co2');
    for(var i=0; i<co2.length; i++)co2[i].style.display='none';
    
    var select = document.getElementsByClassName('stm-multiple-select');
    for(var i=0; i<select.length; i++)select[i].style.display='none';
    
    // 加判断避免元素不存在时报错
    let mybutton1 = document.getElementById("style-mobile-button1");
    if (mybutton1) mybutton1.remove();
};

关键修改点： #

• 将show函数从jQuery ready回调内部移到全局，让addStyles()可以直接调用
• 给所有DOM元素操作加了存在性判断，避免元素已被删除时触发报错

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