Jquery 如何使用CSS类索引简化更改函数

问题：我如何简化下面的（工作）jQuery函数，以便在选择字段中使用无限多的选项

说明：此函数根据选择字段中的选定选项显示/隐藏元素

示例：如果我想使用“select-element-20”，如何在不为select字段中的每个可能选项创建If语句的情况下更改此jQuery函数

我想我需要一些解决方案/变量来索引每个选项值末尾的数字

HTML

<select class="conditional-element-selector">
    <option value="select-element-1">Option 1</option>
    <option value="select-element-2">Option 2</option>
    <option value="select-element-3">Option 3</option>
    <option value="select-element-4">Option 4</option>
</select>

---

所有条件之间的变化都是类中的数字。因此，您可以使用所选

选项的
selectedIndex
以该元素为目标，如下所示：

$（'select.conditional element selector'）。在（'change'，function（）上{
var targetIndex=this.selectedIndex+1；
$（'.conditional element-'+targetIndex）.toggleClass（“隐藏条件元素”）；
$（'[class*=conditional element-]：非（.conditional element selector、.conditional element-'+targetIndex+'））.addClass（“隐藏条件元素”）；
});

请注意，通过用逗号分隔多个选择器，可以为
：not（）
提供多个选择器

我还建议在所有可以使用的目标元素上使用公共类，而不是
[class*=conditional element-]

最后，如果所有的
conditional-element-N
类都是增量的，并且与
选项
元素的索引对齐，那么您可以完全删除这些类，并通过它们的索引将元素关联起来，这将使您的代码更简单、更清晰。大概是这样的：


$（'select.conditional element selector'）。在（'change'，function（）上{
$（'.conditional element'）.hide（）.eq（this.selectedIndex.show（）；
}).触发（“变更”）

选择1
选择2
选择3
选择4
要素1
要素2
要素3
要素4

$（“.conditional element”）.hide（）；//全部隐藏
$（“select.conditional element selector”）。在（“change”，function（）上{
$（“.conditional元素”）.hide（）；
如果（this.value！=“选择”）{
$（“.conditional元素”）
.eq（此.selectedIndex-1）
.show（）；
}
});

挑选
选择1
选择2
选择3
选择4
要素1
要素2
要素3
元素4
谢谢，我已经使用了其他注释/解决方案，但使用了您的拆分函数进行其他操作，这对我帮助很大。
$('select.conditional-element-selector').on('change', function() {

    var val = $(this).val();

    if (val == 'select-element-1') {
      $('.conditional-element-1').toggleClass("hide-conditional-element");
      $('[class*=conditional-element-]:not(.conditional-element-selector):not(.conditional-element-1)').addClass("hide-conditional-element");
    }

    if (val == 'select-element-2') {
      $('.conditional-element-2').toggleClass("hide-conditional-element");
      $('[class*=conditional-element-]:not(.conditional-element-selector):not(.conditional-element-2)').addClass("hide-conditional-element");
    }

    if (val == 'select-element-3') {
      $('.conditional-element-3').toggleClass("hide-conditional-element");
      $('[class*=conditional-element-]:not(.conditional-element-selector):not(.conditional-element-3)').addClass("hide-conditional-element");
    }

    if (val == 'select-element-4') {
      $('.conditional-element-4').toggleClass("hide-conditional-element");
      $('[class*=conditional-element-]:not(.conditional-element-selector):not(.conditional-element-4)').addClass("hide-conditional-element");
    }

}); 

$("select.conditional-element-selector").on("change", function() {
  var val = $(this).val();
  const id = val.split("-")[2] // select-element-1 => 1
  $(`.conditional-element-${id}`).toggleClass("hide-conditional-element");
    $(
      `[class*=conditional-element-]:not(.conditional-element-selector):not(.conditional-element-${id})`
    ).addClass("hide-conditional-element");
});