如何用选项卡框编写更好的JS函数输入收音机

Question

我在JavaScript中编写了这个函数来显示关于输入收音机的文本信息框被选中。效果不太好。有人能给我一个更好的方法吗？

我不知道为什么只有两个输入在这里工作，在我的页面所有工作良好。但是我确信有更好的方法来编写js函数。

​

document.getElementById('materiali').onclick = function(){myFunction()}; // click on div with input

function myFunction() {
	var materiales = document.getElementsByName('materiale'); // div that contains input
	var materiale_value;
	var materiale_valueName;

	for(var i = 0; i < materiales.length; i++){
			if(materiales[i].checked){
					materiale_value = i; // index obj input checked
					materiale_valueName = materiales[i].value; // value of the input checked
			}
	}

	var materialiText = document.getElementsByClassName('text')[0].childNodes[materiale_value].className; // Class that contains the relative input text selected
	
  var divNoShow = document.querySelectorAll('.text div'); // all div with text
	
  for (var j = 0; j < divNoShow.length; j++) {
		divNoShow[j].style.display = "none" // don't show all div with text
	}
	document.getElementsByClassName('text')[0].childNodes[materiale_value].style.display = "block"; // show only the div with the class selectd by idex obj

}

<div class="materiali" id="materiali">
  <p class="uppercase">Choose material</p>
		<input class="osb" type="radio" name="materiale" id="osb" value="osb">
			<label>OSB</label>
		<input class="fir" type="radio" name="materiale" id="fir" value="fir">
			<label>FIR</label>
		<input class="mdf" type="radio" name="materiale" id="mdf" value="mdf">
			<label>MDF</label>
		<input class="poplar" type="radio" name="materiale" id="poplar" value="poplar">
			<label>POPLAR</label>
</div>

<div class="text">
	<div class="osb" style="display:none">OSB Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>
	<div class="fir" style="display:none">FIR Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>
	<div class="mdf" style="display:none">MDF Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>
	<div class="poplar" style="display:none">POPOLAR Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>
</div>

​

Answer 1

一些简单的更改将使其更适合您：

1. 使用divNoShow[materiale_value]使所选项可见。它只会是您想要的div，而不是额外的文本节点。
2. 用标签将单选按钮包裹起来，这样单击标签就会选择收音机。如果没有选择以避免错误，则
3. 会提前返回。

​

document.getElementById('materiali').onclick = function(){myFunction()}; // click on div with input

function myFunction() {
    var materiales = document.getElementsByName('materiale'); // div that contains input
    var materiale_value;
    var materiale_valueName;

    for(var i = 0; i < materiales.length; i++){
        if(materiales[i].checked){
            materiale_value = i; // index obj input checked
            materiale_valueName = materiales[i].value; // value of the input checked
        }
    }
    var divNoShow = document.querySelectorAll('.text div'); // all div with text
	
    for (var j = 0; j < divNoShow.length; j++) {
        divNoShow[j].style.display = "none" // don't show all div with text
    }
    if(typeof materiale_value=="undefined") return;
    divNoShow[materiale_value].style.display = "block"; // show only the div with the class selectd by idex obj
}

<div class="materiali" id="materiali">
    <p class="uppercase">Choose material</p>
    <label>
        <input class="osb" type="radio" name="materiale" id="osb" value="osb"> OSB
    </label>
    <label>
        <input class="fir" type="radio" name="materiale" id="fir" value="fir"> FIR
    </label>
    <label>
        <input class="mdf" type="radio" name="materiale" id="mdf" value="mdf"> MDF
    </label>
    <label>
        <input class="poplar" type="radio" name="materiale" id="poplar" value="poplar"> POPLAR
    </label>
</div>

<div class="text">
    <div class="osb" style="display:none">OSB Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>
    <div class="fir" style="display:none">FIR Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>
    <div class="mdf" style="display:none">MDF Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>
    <div class="poplar" style="display:none">POPOLAR Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>
</div>

​

Answer 2

执行document.getElementsByClassName('text')[0].childNodes时，生成的数组如下所示：

0: text
1: div.osb
2: text
3: div.fir
4: text
5: div.mdf
6: text
7: div.poplar
8: text

因此，您只需更改这一行：

document.getElementsByClassName('text')[0].childNodes[materiale_value].style.display = "block";

对此：

document.getElementsByClassName('text')[0].childNodes[materiale_value*2+1].style.display = "block";

最终结果：

document.getElementById('materiali').onclick = function(){myFunction()}; // click on div with input

function myFunction() {
	var materiales = document.getElementsByName('materiale'); // div that contains input
	var materiale_value;
	var materiale_valueName;

	for(var i = 0; i < materiales.length; i++){
			if(materiales[i].checked){
					materiale_value = i; // index obj input checked
					materiale_valueName = materiales[i].value; // value of the input checked
			}
	}

	var materialiText = document.getElementsByClassName('text')[0].childNodes[materiale_value].className; // Class that contains the relative input text selected
	
  var divNoShow = document.querySelectorAll('.text div'); // all div with text
	
  for (var j = 0; j < divNoShow.length; j++) {
		divNoShow[j].style.display = "none" // don't show all div with text
	}
	document.getElementsByClassName('text')[0].childNodes[materiale_value*2+1].style.display = "block"; // show only the div with the class selectd by idex obj
    //console.log(document.getElementsByClassName('text')[0].childNodes[materiale_value]);
}

<div class="materiali" id="materiali">
        <p class="uppercase">Choose material</p>
              <input class="osb" type="radio" name="materiale" id="osb" value="osb">
                  <label>OSB</label>
              <input class="fir" type="radio" name="materiale" id="fir" value="fir">
                  <label>FIR</label>
              <input class="mdf" type="radio" name="materiale" id="mdf" value="mdf">
                  <label>MDF</label>
              <input class="poplar" type="radio" name="materiale" id="poplar" value="poplar">
                  <label>POPLAR</label>
      </div>
      
      <div class="text">
          <div class="osb" style="display:none">OSB Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>
          <div class="fir" style="display:none">FIR Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>
          <div class="mdf" style="display:none">MDF Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>
          <div class="poplar" style="display:none">POPOLAR Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>
      </div>

​

注意:你定义了materialiText，但你从不使用它.如果您仍然保留它，您还应该在该行上将materiale_value更改为materiale_value*2+1。

Answer 3

你们很亲密..。只需选择类名，而不是这样的索引：

document.querySelector('.text .' + materiale_valueName).style.display = "block";