Как заставить функцию щелчка работать независимо?

Question

Интересно, можете ли вы мне помочь.

Я использую приведенный ниже код и хотел бы знать, знает ли кто-нибудь, как заставить функцию в JS работать независимо от UL, скорее мешая друг другу.

В основном, когда страница загружается, она вызывает функцию JS, которая проверяет входные данные в форме для установленного переключателя и применяет определенный класс CSS для установки стилей и выделения его родительскому LI в разметке HTML.Это также работает из события click, если вы выбираете другую опцию в списке переключателей, чтобы удалить любые стили, которые могли быть применены к любому LI, и поместить класс в соответствующий родительский LI опции, на которую вы щелкнули

Теперь проблема заключается в том, что, поскольку я проверяю его по форме (которая содержит UL и дочерние LI, которые содержат список переключателей), где есть два разных списка переключателей, которые нарушают код, поскольку он не знает, какойUL в форме для применения кода.Это прекрасно работает, если у меня только один UL, поэтому мне нужно, чтобы JS был немного «умнее» и работал на соответствующем UL, на который я нажал, и не влиял на другой.Я все еще хочу, чтобы он выделил опцию переключателя в обоих списках при загрузке страницы, хотя

Буду очень признателен за любую помощь.

HTML:

<form id="myForm">
   <ul id="activityChoices" class="radioList">
      <li class="radio-item">
          <input type="radio" id="radio1" name="radio" value="radio1">
          <label for="radio1">radio1</label>
      </li>
      <li class="radio-item">
          <input type="radio" id="radio2" name="radio" value="radio2">
          <label for="radio2">radio2</label>
      </li>
      <li class="radio-item">
          <input type="radio" id="radio3" name="radio" value="radio3" checked="checked">
          <label for="radio3" >radio3</label>
      </li>
      <li class="radio-item">
          <input type="radio" id="radio4" name="radio" value="radio4">
          <label for="radio4" >radio4</label>
      </li>
  </ul>
  <ul>
      <li>
          <input type="radio" id="yes" name="answer" value="yes">
          <label for="yes">yes</label>
      </li>
      <li>
          <input type="radio" id="no" name="answer" value="no">
          <label for="no">no</label>
      </li>
  </ul>
</form>
<script type="text/javascript">
    highlightSelectedRadio('myForm','input');
</script>

JS:

function highlightSelectedRadio(myForm, tag) 
{
  var form = document.getElementById(myForm);
  var inputArray = form.getElementsByTagName(tag);
  var prevClass = null;

  for (i=0;i<inputArray.length;i++) {
    if(inputArray[i].checked) {
      prevClass = inputArray[i].parentNode.getAttribute("class");
      inputArray[i].parentNode.className += " myclass";
    }   
  }

  var myArray = form.getElementsByClassName("myclass");
  form.onclick = function() {
    for (j=0;j<myArray.length;j++) {
      myArray[j].className = prevClass;
    }
    inputArray = this.getElementsByTagName(tag);

    for (i=0;i<inputArray.length;i++) {
      if(inputArray[i].checked) {
        inputArray[i].parentNode.className += " myclass";
      }   
    }
  }
}

Answer 1

Если я правильно понял ваш вопрос, думаю, это то, что вам нужно:

function highlightSelectedRadio(myForm, tag) 
{
    var form = document.getElementById(myForm);
    var radios = form.getElementsByTagName(tag);

    for (var i=0, l = radios.length;i < l; i++) {
        if (radios[i].checked) {
            addClass(radios[i].parentNode, 'myclass');
        }
    }

    form.onclick = function() {
        for (var i = 0, l = radios.length; i < l; i++) {
            if (radios[i].checked) {
                addClass(radios[i].parentNode, 'myclass');
            } else {
                removeClass(radios[i].parentNode, 'myclass');
            }
        }
    };
}

function addClass(el, c) {
    if (el.className.indexOf(c) === -1) {
        el.className += ' myclass';
    }
}
function removeClass(el, c) {
    var re = new RegExp(' ?' + c + ' ?');
    el.className = el.className.replace(re, '');
}