javascript - 从许多相同的元素中单击时更改 HTML 选择标签

Question

我正在尝试使用 jQuery 将一些功能添加到 HTML 页面，但在访问 DOM 时遇到一些问题。到目前为止，我正在通过“id”访问 DOM 元素，这是因为我认为这是最简单的方法，但它有一个问题。对于一个独特的元素来说这是可以的，但是如果我有 2 个或更多相同的元素怎么办？ Id 应该是唯一的，所以我需要一种不同的方式来做到这一点。

我有一些代码可以部分完成我需要的操作，但正如我之前提到的，它仅适用于“一个元素”，我需要执行相同的操作，但需要使用 2 个或更多“相等元素”。那么让我向您展示到目前为止我的代码。

<div style="background-color: indigo;">Input
      <select class="" name="" id="ana_dig">
        <option value="" selected disabled>Choose</option>
        <option value="ana">Analogic</option>
        <option value="dig">Digital</option>
      </select>
      <select class="input" id="dig" style="display:none;">
        <option value="" selected disabled>Choose</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
      </select>
      <select class="input" style="display:none;" id="ana">
        <option value="" selected disabled>Choose</option>
        <option value="0">A0</option>
        <option value="1">A1</option>
        <option value="2">A2</option>
        <option value="3">A3</option>
        <option value="4">A4</option>
        <option value="5">A5</option>
      </select>
    </div>

$(function() {
        $('#ana_dig').change(function() {
          $('.input').hide();
          $('#' + $(this).val()).show();
        });
      });

如您所见，我有一个“div”，其中有 3 个“选择”，根据第一个“选择”中选择的选项，它会显示第二个或第三个“选择”。非常简单，但如果复制并粘贴“div”，第二个“div”将无法像第一个那样工作。如果我想要 2、3 个或更多“div”像第一个那样工作，我该怎么办？有什么建议吗？

Answer 1

改用类。

注意不再更改 IDS，添加到输入的类您可以有多个由空格分隔的类

<div style="background-color: indigo;">Input
      <select class="someclass" name="">
        <option value="" selected disabled>Choose</option>
        <option value="ana">Analogic</option>
        <option value="dig">Digital</option>
      </select>
      <select class="input dig" style="display:none;">
        <option value="" selected disabled>Choose</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
      </select>
      <select class="input ana" style="display:none;">
        <option value="" selected disabled>Choose</option>
        <option value="0">A0</option>
        <option value="1">A1</option>
        <option value="2">A2</option>
        <option value="3">A3</option>
        <option value="4">A4</option>
        <option value="5">A5</option>
      </select>
</div>

然后执行此操作:另请参阅此处的更改

$(function() {
        $('.someclass').change(function() {
          $('.input').hide();
          $('.' + $(this).val()).show(); // dot is looking for class # is looking for id
        });
      });