最小化jQuery语句的最佳方法

我有两种形式，我目前正在切换出一个onChange事件，取决于选择了哪个选项值

我当前的代码正在运行，但我想学习通过组合这两条语句来减少这两条语句的最佳方法。最有效的方法是什么

$'selectSearchPages'.changefunction{ 如果$'selectSearchPages'.val=='pages'{ $'.searchFormProducts'.hide； $'.searchFormPages'.show； $'.pageSearch'.show； $'.productSearch'.hide； }否则{ $'.searchFormProducts'.show； $'.searchFormPages'。隐藏； $'.pageSearch'.hide； $'.productSearch'.show； } }; $'selectSearchProducts'.changefunction{ 如果$'selectSearchProducts'.val=='products'{ $'.searchFormProducts'.hide； $'.searchFormPages'.show； $'.pageSearch'.hide； $'.productSearch'.show； }否则{ $'.searchFormProducts'.hide； $'.searchFormPages'.show； $'.pageSearch'.show； $'.productSearch'.hide； } };

再次搜索页面：

页 产品 页 产品 搜索

您搜索了pagesproducts。

要搜索产品页面，请从上面的下拉列表中选择并输入搜索结果。。

---

您可以选择多个元素$'.searchFormProducts、.productSearch'

$'selectSearchPages'.changefunction{ 如果$'selectSearchPages'.val=='pages'{ $'.searchFormProducts、.productSearch.hide； $'.searchFormPages、.pageSearch.show； }否则{ $'.searchFormProducts、.productSearch.show； $'.searchFormPages、.pageSearch.hide； } }; $'selectSearchProducts'.changefunction{ 如果$'selectSearchProducts'.val=='products'{ $'.searchFormProducts、.pageSearch.hide； $'.searchFormPages、.productSearch.show； }否则{ $'.searchFormProducts、.productSearch.hide； $'.searchFormPages、.pageSearch.show； } };

再次搜索页面：

页 产品 页 产品 搜索

您搜索了pagesproducts。

要搜索产品页面，请从上面的下拉列表中选择并输入搜索结果。。

---

我将通过简化使用的类来简化脚本。您必须创建许多太具体的不同类。您只需要两个：。页面和。产品

在元素上使用选择值为该类时应显示的类

因此，这可以简单到：

$("select.pagesOrProducts").change(function() {

  // A boolean true/false
  let display = $(this).val() == "products"
  
  $('.products').toggle(display);
  $('.pages').toggle(!display);  // Notice the exclamation mark here
});

---

.toggletrue与.show相同，而.togglefalse与.hide相同。

能否在刚才添加的问题中包含所有相关的HTML，其他表单与不同的类相同。我认为这很好。结合它们将需要更复杂的if/then代码。我想要尽可能少的代码。