Question

我正在创建一个带有一个问题（“您拥有汽车吗？”）的表格，当回答“是”时，就会显示出第二个问题（“您拥有多少辆汽车？”）。第二个问题表明了自己，但是选择选项（1,2,3,4）仍然隐藏。我尝试向选择中添加/删除隐藏的类，但是它不起作用。

// Reference to the hidden elements (doesn't change
// when the class list changes), as well as the select
var hidden = document.querySelectorAll('.hidden');
var select = document.querySelector('#_fid_126');

select.addEventListener('change', function() {  
// Hide all elements that were initially hidden
  for (var i in Object.keys(hidden)) {
    hidden[i].classList.add('hidden');
  }
  
// Show the element that corresponds to
// the select value
  document
    .querySelector('#' + this.value)
    .classList
    .remove('hidden');
});

.hidden {
  display: none;

<table>
<tr><td class=m>Do you own a car?	</td>
<td class=m><select name="_fid_126" id="_fid_126" >
  <option></option>
  <option value="_fid_127">Yes</option>
  <option>No</option>
</select></td></tr>

<tr><td id="_fid_127" class="hidden">How many cars do you own?</td>
<td id="_fid_127" class="hidden"><select name="_fid_127" id="_fid_127">
	<option></option>
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	</select></td></tr>
</table>

Answer 1

您不能有多个具有相同id的元素，而是将它们都包装在使用该id的元素中。

// Reference to the hidden elements (doesn't change
// when the class list changes), as well as the select
var hidden = document.querySelectorAll('.hidden');
var select = document.querySelector('#_fid_126');

select.addEventListener('change', function() {  
// Hide all elements that were initially hidden
  for (var i in Object.keys(hidden)) {
    hidden[i].classList.add('hidden');
  }
  
// Show the element that corresponds to
// the select value
  document
    .querySelector('#' + this.value)
    .classList
    .remove('hidden');
});

.hidden {
  display: none;

<table>
<tr><td class=m>Do you own a car?	</td>
<td class=m><select name="_fid_126" id="_fid_126" >
  <option></option>
  <option value="_fid_127">Yes</option>
  <option>No</option>
</select></td></tr>

<tr id="_fid_127" class="hidden"><td>How many cars do you own?</td>
<td><select name="_fid_127" id="_fid_127">
	<option></option>
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	</select></td></tr>
</table>

也document.querySelector仅返回满足所提供查询的第一个元素。如果要更改多个元素，请改用document.querySelectorAll（返回HTMLCollection，因此您应该遍历每个元素）

Answer 2

多个元素不能具有相同的ID。在包含td的tr中使用id代替

// Reference to the hidden elements (doesn't change
// when the class list changes), as well as the select
var hidden = document.querySelectorAll('.hidden');
var select = document.querySelector('#_fid_126');

select.addEventListener('change', function() {  
// Hide all elements that were initially hidden
  for (var i in Object.keys(hidden)) {
    hidden[i].classList.add('hidden');
  }
  
// Show the element that corresponds to
// the select value
  document
    .querySelector('#' + this.value)
    .classList
    .remove('hidden');
});

.hidden {
  display: none;

<table>
<tr><td class=m>Do you own a car?	</td>
<td class=m><select name="_fid_126" id="_fid_126" >
  <option></option>
  <option value="_fid_127">Yes</option>
  <option>No</option>
</select></td></tr>

<tr id="_fid_127" class="hidden"><td>How many cars do you own?</td>
<td><select name="_fid_127" id="_fid_127">
	<option></option>
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	</select></td></tr>
</table>

Answer 3

这是一个非唯一的id问题，您有3个元素都具有相同的id，也使用了“ querySelector”，它仅返回匹配的第一个元素。如果将其更改为querySelectorAll，然后迭代结果可能会起作用，但是另一种方法不是将它们视为三个单独的元素，请尝试将id =“ _ fid_127”放在父tr元素上。

条件形式隐藏第一类，但不隐藏第二类

3 个答案: