时间戳

首页 > 解决方案 > 从许多相同的元素中单击时更改 HTML 选择标记

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

问题描述

我正在尝试使用 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 个“选择”，根据第一个“选择”中选择的选项，它会显示第二个或第三个“选择”。很简单，但是如果复制并粘贴 de 'div'，第二个 'div' 就不能作为第一个。如果我想要 2、3 或更多 'div' 像第一个一样工作，我该怎么办？有什么建议么？

标签： javascriptjqueryhtml

解决方案

改用类。

通知更改没有更多的 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
        });
      });

推荐阅读