Блог

У меня есть переключатель

Html-код:

 lt;input type="radio" class="first" name="bright" checkedgt; lt;input type="radio" class="second" name="bright" gt; lt;input type="radio" class="third" name="bright"gt; lt;input type="radio" class="four" name="bright"gt;  

И у меня есть навигационная панель

Html-код

 lt;ul class="nav"gt;  lt;li class="st st1 active" data-cont="first"gt; lt;h2 class="inner"gt;وزارة الاستثمارlt;/h2gt; lt;/ligt; lt;li class="st st2" data-cont="second"gt; lt;h2 class="inner"gt;وزارة التجارةlt;/h2gt; lt;/ligt; lt;li class="st st3" data-cont="third"gt; lt;h2 class="inner"gt;جهات حكومية اخرىlt;/h2gt; lt;/ligt; lt;li class="st st4" data-cont="four"gt; lt;h2 class="inner"gt;مكتب هندسيlt;/h2gt; lt;/ligt;  lt;/ulgt;  

Эти 2 соединены с данными-продолжением, которые имеют класс переключателя

Я хочу, чтобы при нажатии на li правильный переключатель проверялся с помощью javascript

Я попытался сделать это, используя этот код в JavaScript

 let radio = document.querySelectorAll("input"); let radioArray = Array.from(radio); let tabs = document.querySelectorAll(".nav li"); let tabsArray = Array.from(tabs);   tabsArray.forEach((ele) =gt; {  ele.addEventListener("click", function (e) {  tabsArray.forEach((ele) =gt; {  ele.classList.remove("active");  });  e.currentTarget.classList.add("active");  document.querySelector(e.currentTarget.dataset.cont).checked = true;  }); });  

Я пытаюсь удалить активный класс из li и поместить его в li, где я нажимаю, затем я хочу, чтобы переключатель был установлен

Кто-нибудь может мне в этом помочь?

последний элемент запроса-это место, где ваш код терпит неудачу, вы не ссылаетесь на класс для ввода, он должен быть document.querySelector('.' e.currentTarget.dataset.cont).checked = true; отмечен префиксом «.»

Хотя это отвечает на ваш вопрос, вероятно, более полезно указать, что, изменив разметку html, чтобы она была немного более доступной, вы можете устранить необходимость во всем javascript в вашем примере

напр.

 input:checked   label {  color:Red; } 

 lt;divgt;lt;input type="radio" id="first" name="bright" checkedgt; lt;label for='first'gt;وزارة الاستثماlt;/labelgt; lt;/divgt; lt;divgt; lt;input type="radio" id="second" name="bright" gt; lt;label for='second'gt;وزارة التجارةlt;/labelgt; lt;/divgt; lt;divgt; lt;input type="radio" id="third" name="bright"gt; lt;label for='third'gt;جهات حكومية اخرىlt;/labelgt; lt;/divgt; lt;divgt; lt;input type="radio" id="four" name="bright"gt; lt;label for='four'gt;مكتب هندسيlt;/labelgt; lt;/divgt; 

Использование меток, связанных с вашими переключателями, теперь значительно более доступно, и вы можете значительно сократить большую часть своей разметки ( хотя для того, чтобы быть доступным, вам нужно будет указать более значимое имя for атрибута.