javascript — изменить HTML-тег выбора при нажатии из множества идентичных элементов

Изменить HTML Выберите тег при нажатии из множества идентичных элементов

Я пытаюсь добавить функциональность с помощью jQuery на страницу HTML, но у меня возникают проблемы с доступом к DOM. Сейчас я обращаюсь к элементам DOM по ‘id’, потому что я думаю, что это самый простой способ сделать это, но у него есть проблема. Для уникального элемента это нормально, но что если у меня есть 2 или более одинаковых элемента? Идентификатор должен быть уникальным, поэтому мне нужен другой способ сделать это.

У меня есть некоторый код, который частично выполняет то, что мне нужно, но, как я упоминал ранее, он работает только с «одним элементом», мне нужно сделать то же самое, но с 2 или более «равными элементами». Итак, позвольте мне покажет вам мой код.

 {amp}lt;div style="background-color: indigo;"{amp}gt;Input {amp}lt;select class="" name="" id="ana_dig"{amp}gt; {amp}lt;option value="" selected disabled{amp}gt;Choose{amp}lt;/option{amp}gt; {amp}lt;option value="ana"{amp}gt;Analogic{amp}lt;/option{amp}gt; {amp}lt;option value="dig"{amp}gt;Digital{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;select class="input" id="dig" style="display:none;"{amp}gt; {amp}lt;option value="" selected disabled{amp}gt;Choose{amp}lt;/option{amp}gt; {amp}lt;option value="1"{amp}gt;1{amp}lt;/option{amp}gt; {amp}lt;option value="2"{amp}gt;2{amp}lt;/option{amp}gt; {amp}lt;option value="3"{amp}gt;3{amp}lt;/option{amp}gt; {amp}lt;option value="4"{amp}gt;4{amp}lt;/option{amp}gt; {amp}lt;option value="5"{amp}gt;5{amp}lt;/option{amp}gt; {amp}lt;option value="6"{amp}gt;6{amp}lt;/option{amp}gt; {amp}lt;option value="7"{amp}gt;7{amp}lt;/option{amp}gt; {amp}lt;option value="8"{amp}gt;8{amp}lt;/option{amp}gt; {amp}lt;option value="9"{amp}gt;9{amp}lt;/option{amp}gt; {amp}lt;option value="10"{amp}gt;10{amp}lt;/option{amp}gt; {amp}lt;option value="11"{amp}gt;11{amp}lt;/option{amp}gt; {amp}lt;option value="12"{amp}gt;12{amp}lt;/option{amp}gt; {amp}lt;option value="13"{amp}gt;13{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;select class="input" style="display:none;" id="ana"{amp}gt; {amp}lt;option value="" selected disabled{amp}gt;Choose{amp}lt;/option{amp}gt; {amp}lt;option value="0"{amp}gt;A0{amp}lt;/option{amp}gt; {amp}lt;option value="1"{amp}gt;A1{amp}lt;/option{amp}gt; {amp}lt;option value="2"{amp}gt;A2{amp}lt;/option{amp}gt; {amp}lt;option value="3"{amp}gt;A3{amp}lt;/option{amp}gt; {amp}lt;option value="4"{amp}gt;A4{amp}lt;/option{amp}gt; {amp}lt;option value="5"{amp}gt;A5{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/div{amp}gt; 
 $(function() { $('#ana_dig').change(function() { $('.input').hide(); $('#'   $(this).val()).show(); }); }); 

Как вы можете видеть, у меня есть «div», который имеет 3 «select», и в зависимости от того, какая опция выбрана в первом «select», он показывает вам второе или третье «select». Довольно просто, но если скопировать и вставить de ‘div’, второй ‘div’ не будет работать как первый Что мне делать, если я хочу, чтобы 2, 3 или более ‘div’ работали как первый? Какие-либо предложения?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector