Question

我想知道你是否可以帮助我。

我正在使用下面的代码，想知道是否有人知道如何让JS中的函数在UL上独立工作而相互干扰。

基本上，当页面加载时，它调用JS函数，该函数检查表单上的输入以检查单选按钮，并应用特定的CSS类来设置样式，并在HTML标记中突出显示它的父LI。如果您在单选按钮列表中选择另一个选项以删除可能已应用于任何LI的任何样式并将该类放在您单击的选项的相应父LI上，它也可以从click事件中解决。

现在的问题在于，我正在检查一个表单（包含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, '');
}

如何让点击功能独立工作

1 个答案: