你如何让点击功能独立工作 [英] How do you get a click function to work independantly

问题描述

不知道你能不能帮我.

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

I am using the below code and wanted to know if anyone know how to get the function in the JS to work independently on UL's rather interfering with each other.

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

Basically when the page loads it calls the JS function which checks the inputs on the form for the checked radio button and applies a specific CSS class to set styles and highlight to it's parent LI in the HTML mark-up. It also works out from the click event if you choose another option in the radio button list to remove any styles that may have been applied to any LI's and put the class on the corresponding parent LI of the option you have clicked on

现在的问题在于，当我根据一个表单(其中包含包含单选按钮列表的 UL 和儿童 LI)进行检查时，其中有两个不同的单选按钮列表会破坏代码，因为它不知道将代码应用到表单中的哪个 UL.如果我只有一个 UL，它工作正常，所以我真的需要 JS 更聪明"一点，并在我点击的相应 UL 上运行而不影响另一个.我仍然希望它在页面加载时突出显示两个列表中选中的单选按钮

Now the problem lies is that as I am checking it against a form (which houses the UL and children LI's that contain the radio button list) where there are two different radio button lists which breaks the code as it doesn't know which UL in the form to apply the code to. It works fine if I only have one UL so really I need the JS to be a bit more 'cleverer' and run on the corresponding UL that I have clicked on and not affect the other. I still want it to highlight the checked radio button on both lists on page load though

非常感谢您的帮助.

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";
      }   
    }
  }
}

推荐答案

如果我正确理解您的问题，我认为这就是您所需要的:

If I understood your question correctly, I think this is what you need:

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, '');
}

这篇关于你如何让点击功能独立工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！