Как упростить функцию изменения с CSS индексом класса

Question

Вопрос: Как мне упростить приведенную ниже (рабочую) функцию jQuery, чтобы я мог использовать ее для бесконечного числа опций в поле выбора?

Пояснение : Эта функция показывает / скрывает элементы на основе выбранной опции в поле выбора.

Пример: Если я хочу использовать «select-element-20», как я могу изменить эту функцию jQuery без создания оператора if для каждого возможного параметра в поле выбора?

Я думаю, что мне нужно какое-то решение / переменная, которая индексирует числа в конце каждого значения параметра.

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>

jQuery

$('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");
    }

}); 

Answer 1

Все, что изменяется между условиями, это число в классе. Таким образом, вы можете использовать selectedIndex выбранного option для нацеливания на этот элемент, например:

$('select.conditional-element-selector').on('change', function() {
  var targetIndex = this.selectedIndex + 1;
  $('.conditional-element-' + targetIndex).toggleClass("hide-conditional-element");
  $('[class*=conditional-element-]:not(.conditional-element-selector, .conditional-element-' + targetIndex + ')').addClass("hide-conditional-element");
});

Обратите внимание, что вы можете указать несколько селекторов для :not(), разделяя их запятой.

Я бы также предложил использовать общий класс для всех целевых элементов, который вы можете использовать вместо [class*=conditional-element-].

Наконец, если все классы conditional-element-N являются инкрементными и совпадают с После индексации элементов option вы можете полностью избавиться от классов и связать элементы по их индексу, что дает вам гораздо более простой и понятный код. Как то так:

$('select.conditional-element-selector').on('change', function() {
  $('.conditional-element').hide().eq(this.selectedIndex).show();
}).trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

<div class="conditional-element">Element 1</div>
<div class="conditional-element">Element 2</div>
<div class="conditional-element">Element 3</div>
<div class="conditional-element">Element 4</div>

Answer 2

$("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");
});

$(".conditional-element").hide(); // hide all
$("select.conditional-element-selector").on("change", function() {
  $(".conditional-element").hide();
  if (this.value != "Select") {
    $(".conditional-element")
      .eq(this.selectedIndex - 1)
      .show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select class="conditional-element-selector">
        <option default>Select</option>
        <option value="val1">Option 1</option>
        <option value="val2">Option 2</option>
        <option value="val3">Option 3</option>
        <option value="val4">Option 4</option>
    </select>
    <div class="conditional-element">Element 1</div>
    <div class="conditional-element">Element 2</div>
    <div class="conditional-element">Element 3</div>
    <div class="conditional-element">Element 4</div>