如何使用jQuery隐藏数组外的所有元素？表单动态隐藏需求问询

针对你这种表单元素较多的场景，我整理了两种简洁高效的实现方式，同时先纠正你代码里的一个小错误——你写的$("#.class-element")是错误的类选择器，正确写法是$(".class-element")，别多带那个#哦。

方法一：用选择器数组批量控制（推荐，更易维护） #

这种方式把需要保留显示的元素选择器存在数组里，先隐藏所有表单元素，再批量显示目标元素，逻辑清晰且方便后续修改：

$("#type").on('change', function() { 
  // 先去除选项值的前后空格，避免因为<option>里的空格导致匹配失败
  const selectedType = $(this).val().trim();

  // 替换成你实际的表单ID，精准选中表单内的元素，不影响页面其他元素
  const allFormElements = $("#your-form-id input, #your-form-id select");

  if (selectedType === "Blue") { 
    // 定义需要保持可见的元素选择器数组
    const keepSelectors = [
      "#id-element", 
      ".class-element", 
      "#another-input", 
      ".some-select-component"
    ]; 

    // 先隐藏所有表单内的input/select
    allFormElements.hide(); 
    // 遍历数组，显示需要保留的元素
    $.each(keepSelectors, function(_, selector) {
      $(selector).show();
    });
  } else {
    // 选择其他选项时（比如Red），显示所有表单元素，可根据你的需求调整
    allFormElements.show();
  }
});

方法二：基于jQuery对象数组过滤 #

如果你更倾向于直接使用jQuery对象数组，也可以通过过滤来隐藏不需要的元素：

$("#type").on('change', function() { 
  const selectedType = $(this).val().trim();
  const allFormElements = $("#your-form-id input, #your-form-id select");

  if (selectedType === "Blue") { 
    // 定义需要保持可见的jQuery对象数组（注意选择器要正确）
    const keepElements = [
      $("#id-element"), 
      $(".class-element"), 
      $("#another-target-element")
    ]; 

    // 将jQuery对象数组转为选择器字符串，用于过滤
    const keepSelectorString = keepElements.map(el => el.selector).join(',');
    
    // 隐藏不在保留列表里的元素
    allFormElements.not(keepSelectorString).hide();
    // 确保保留的元素是显示状态
    $(keepSelectorString).show();
  } else {
    allFormElements.show();
  }
});

额外注意事项： #

• 如果你的表单里还有textarea、button等其他需要控制的元素，只需修改allFormElements的选择器，比如$("#your-form-id input, #your-form-id select, #your-form-id textarea")
• 把表单ID和选择器数组抽成变量，后续维护起来会更轻松，不用在代码里到处找修改点
• 你的jQuery 2.1.1版本完全支持上述所有方法，不用担心兼容性问题

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