Question

我遇到麻烦让我的第二个for循环正常工作。我希望formFields能够彼此独立地工作。如果您运行下面的代码段，您将看到第一组正常工作，但是当第二个字段显示时，如果单击“是”，则没有任何反应，如果您单击否，则该组字段将消失。第二组字段由于某种原因控制第一组字段。

根据第二组字段的是/否答案，如果是，则应在该字段下显示新输入。

有人看到我做错了吗？

var radioCheck = '';
var radioCheck2 = '';
const radios = Array.from(document.querySelectorAll('[name="yesno"]'));
const radios2 = Array.from(document.querySelectorAll('[name="yesno2"]'));

for (const radio of radios) {
  radio.addEventListener('change', function() {
    radioCheck = document.querySelector('[name="yesno"]:checked').value;
    console.log(radioCheck);
    if (radioCheck == 'Yes') {
      $('#ansYes').fadeToggle(400);
    } else {
      $('#ansYes').fadeOut(400);
    }
  });
}
for (const radio2 of radios2) {
  radio2.addEventListener('change', function() {
    radioCheck2 = document.querySelector('[name="yesno2"]:checked').value;
    console.log(radioCheck2);
    if (radioCheck2 == 'Yes') {
      $('#ansYes2').fadeToggle(400);
    } else {
      $('#ansYes2').fadeOut(400);
    }
  });
}

.radio {
	display: none;
}
.radioAnswer {
	width: 220px;
	display: inline-block;
	vertical-align: top;
	background: #dbc8ca;
	cursor: pointer;
	padding: 15px 0;
	transition-duration: .4s;
	position: relative;
}
.radioAnswer::before {
	display: inline-block;
	content: "";
	border-width: 0 2px 2px 0;
	border-color: transparent;
	border-style: solid;
	width: 0;
	height: 0;
	transition: width .4s linear .1s, 
    height .2s linear 1.6s;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: rotate(35deg) translateY(-50%);
	transform-origin: center right;
}
input[type=radio]:checked+.radioAnswer {
	background: #0a0;
	color: #fff;
}
input[type=radio]:checked+.radioAnswer::before {
	border-color: #fff;
	transform: rotate(35deg) translateY(-50%);
	height: 1.5em;
	width: .8em;
	transition: all .4s linear 0s, width .4s linear .1s, height .2s linear .3s;
	position: absolute;
}
.radioAnswer {
	font-family: 'Open Sans', sans-serif;
	font-size: .9rem;
	text-align: center;
}
#ansYes, #ansYes2 {
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="formField">
  <label class="label">Will you be attending?<span class="red"> *</span></label>
  <input type="radio" value="Yes" class="radio" name="yesno" id="yes">
  <label class="radioAnswer" for="yes">Yes</label>
  <input type="radio" value="No" class="radio" name="yesno" id="no">
  <label class="radioAnswer" for="no">NO</label>
</div>
<div class="formField" id="ansYes">
  <label class="label">Will you be bringing any guests?</label>
  <input type="radio" value="Yes" class="radio" name="yesno2" id="yes2">
  <label class="radioAnswer" for="yes">Yes</label>
  <input type="radio" value="No" class="radio" name="yesno2" id="no2">
  <label class="radioAnswer" for="no">NO</label>
</div>
<div class="formField" id="ansYes2">
  <label class="label">What is your guest's name?</label>
  <input type="text" class="input" name="guest1" id="guest1">
</div>

Answer 1

标签设置错误的目标。

在第二个问题的HTML中，将for="yes"和for="no"替换为for="yes2"和for="no2"

＆＃13;

var radioCheck = '';
var radioCheck2 = '';
const radios = Array.from(document.querySelectorAll('[name="yesno"]'));
const radios2 = Array.from(document.querySelectorAll('[name="yesno2"]'));

for (const radio of radios) {
  radio.addEventListener('change', function() {
    radioCheck = document.querySelector('[name="yesno"]:checked').value;
    console.log(radioCheck);
    if (radioCheck == 'Yes') {
      $('#ansYes').fadeToggle(400);
    } else {
      $('#ansYes').fadeOut(400);
    }
  });
}
for (const radio2 of radios2) {
  radio2.addEventListener('change', function() {
    radioCheck2 = document.querySelector('[name="yesno2"]:checked').value;
    console.log(radioCheck2);
    if (radioCheck2 == 'Yes') {
      $('#ansYes2').fadeToggle(400);
    } else {
      $('#ansYes2').fadeOut(400);
    }
  });
}

＆＃13;

.radio {
	display: none;
}
.radioAnswer {
	width: 220px;
	display: inline-block;
	vertical-align: top;
	background: #dbc8ca;
	cursor: pointer;
	padding: 15px 0;
	transition-duration: .4s;
	position: relative;
}
.radioAnswer::before {
	display: inline-block;
	content: "";
	border-width: 0 2px 2px 0;
	border-color: transparent;
	border-style: solid;
	width: 0;
	height: 0;
	transition: width .4s linear .1s, 
    height .2s linear 1.6s;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: rotate(35deg) translateY(-50%);
	transform-origin: center right;
}
input[type=radio]:checked+.radioAnswer {
	background: #0a0;
	color: #fff;
}
input[type=radio]:checked+.radioAnswer::before {
	border-color: #fff;
	transform: rotate(35deg) translateY(-50%);
	height: 1.5em;
	width: .8em;
	transition: all .4s linear 0s, width .4s linear .1s, height .2s linear .3s;
	position: absolute;
}
.radioAnswer {
	font-family: 'Open Sans', sans-serif;
	font-size: .9rem;
	text-align: center;
}
#ansYes, #ansYes2 {
	display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="formField">
  <label class="label">Will you be attending?<span class="red"> *</span></label>
  <input type="radio" value="Yes" class="radio" name="yesno" id="yes">
  <label class="radioAnswer" for="yes">Yes</label>
  <input type="radio" value="No" class="radio" name="yesno" id="no">
  <label class="radioAnswer" for="no">NO</label>
</div>
<div class="formField" id="ansYes">
  <label class="label">Will you be bringing any guests?</label>
  <input type="radio" value="Yes" class="radio" name="yesno2" id="yes2">
  <label class="radioAnswer" for="yes2">Yes</label>
  <input type="radio" value="No" class="radio" name="yesno2" id="no2">
  <label class="radioAnswer" for="no2">NO</label>
</div>
<div class="formField" id="ansYes2">
  <label class="label">What is your guest's name?</label>
  <input type="text" class="input" name="guest1" id="guest1">
</div>

＆＃13;

根据价值获取字段显示

1 个答案: