如何简化jQuery中多次调用hide()方法的代码？

首先，你的函数里function hello(this)的this参数是多余的（代码里没用到），可以直接去掉。下面给你几种精简代码的实用方式：

方式1：多选择器合并（精准匹配，最直接） #

把所有需要隐藏的元素ID用逗号分隔，一次性调用hide()方法，避免重复调用：

function hello() {
  $("#fgCode_span, #sfgCode_span, #plant_span, #fgCode_span2, #sfgCode_span2, #plant_span2").hide();
}

方式2：属性选择器（适配ID规律） #

观察你的元素ID有明显规律：要么前缀是fgCode_/sfgCode_/plant_，要么结尾是_span/_span2，可以用属性选择器批量选中：

按前缀匹配 #

function hello() {
  $("[id^='fgCode_'], [id^='sfgCode_'], [id^='plant_']").hide();
}

这个方法会选中所有ID以指定前缀开头的元素，完全贴合你的命名规则。

按结尾匹配 #

function hello() {
  $("[id$='_span'], [id$='_span2']").hide();
}

注意：如果页面上还有其他以_span或_span2结尾的无关元素，这个方法会误隐藏它们，需确保仅针对目标元素使用。

方式3：统一添加类名（扩展性最优） #

如果后续可能新增类似需要隐藏的元素，最推荐给所有目标元素加同一个类（比如hide-target）：

<!-- 给所有需要隐藏的元素添加类 -->
<span id="fgCode_span" class="hide-target">...</span>
<span id="sfgCode_span" class="hide-target">...</span>
<!-- 其他元素同理 -->

然后JS代码可以简化成：

function hello() {
  $(".hide-target").hide();
}

后续新增元素只需加类即可，不用修改JS代码，维护成本最低。

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