WordPress项目中jQuery移除所有formshow类后再添加至指定元素问题

你的脚本主要有两个问题导致需求无法实现：

1. 条件判断逻辑错误 #

原代码里的if (jQuery(this).val() === 'select1' || 'select2')写法不成立，因为'select2'是一个非空字符串，在逻辑判断里永远为真，不管下拉框选的是什么，这个if分支都会执行。同理else if里的判断也有同样问题。

2. 移除类的范围不对 #

你现在只在循环里移除当前要操作的元素的formshow类，但需求是先移除所有带这个类的元素的类，再给目标元素添加。

修正后的代码 #

jQuery(document).ready(function () {
    var element1 = ['option1','option2','option3'];
    var element2 = ['option2','option3','option4'];
    
    jQuery('#select-1').change(function() {
        // 第一步：移除所有带formshow类的元素的该类
        jQuery('.formshow').removeClass('formshow');
        
        var selectedVal = jQuery(this).val();
        // 修正条件判断逻辑
        if (selectedVal === 'select1' || selectedVal === 'select2') {
            jQuery.each(element1, function (index, elementId) {
                jQuery('#' + elementId).addClass('formshow');
            });
        }
        // 注意大小写：原代码里的'Select4'和下拉框值是否匹配？这里统一小写或者保持一致
        else if (selectedVal === 'select3' || selectedVal === 'select4') {
            jQuery.each(element2, function (index, elementId) {
                jQuery('#' + elementId).addClass('formshow');
            });
        }
    });
});

关键改动说明 #

• 先执行jQuery('.formshow').removeClass('formshow')：一次性清除所有元素的formshow类，满足你“先移除所有已存在该类的元素”的需求。
• 修正条件判断：把||两边的条件都补全，确保只有选中对应值时才执行对应分支。
• 去掉循环里多余的移除操作：因为已经全局清除过了，直接给目标元素加类即可。

另外注意原代码里else if的'Select4'首字母大写，要和下拉框实际的option值保持一致，否则判断会不生效。

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