为什么这段代码在 IE11、Chrome、Firefox 中不起作用，但在 IE8 中起作用？答案

【问题标题】：Why won't this code work in IE11, Chrome, Firefox, but will work in IE8?为什么这段代码在 IE11、Chrome、Firefox 中不起作用，但在 IE8 中起作用？
【发布时间】：2016-08-11 04:56:12
【问题描述】：

我的开发人员向我扔了一个小模板，这样我就可以对其进行编辑并为工作对象制作模型。当他创建它时，它工作得很好。他在IE8中做到了。当他通过电子邮件将其发送给我时，我在 IE11/Chrome/Firefox 中打开了它，不行。有什么帮助吗？

<!DOCTYPE html>
<html>
	<head>
		<script>
			function handleVisibility(box){
				var visible = (box.checked) ? "block": "none";
				box.parentElement.nextSibling.style.display = visible;							
			}
		</script>
	</head>
	<body>
		
			<div id="divTransfer">
				<input id="cbTransferRefer" type="checkbox" value="TransferRefer" onClick = "handleVisibility(this)">Transfer/Refer<br>
			</div>
			<div  id="pTransferTypes" style="display:none" >
				Transfer Types: 
				<select>
				  <option value="referred">Referred</option>
				  <option value="internalTaskForm">Escalated via Internal Task Form</option>
				  <option value="cci">Escalated via CCI</option>
				  <option value="pdf">Escalated via PDF Form</option>
				  <option value="transferred">Transferred</option>
				</select>	
			</div>
			
			
			<div id="divTemplate">
				<input id="cbTemplateRefer" type="checkbox" value="TemplateRefer" onClick = "handleVisibility(this)">Template/Refer<br>
			</div>
			<div  id="pTemplateTypes" style="display:none" >
				Template Types: 
				<select>
				  <option value="referred">Referred</option>
				  <option value="internalTaskForm">Escalated via Internal Task Form</option>
				  <option value="cci">Escalated via CCI</option>
				  <option value="pdf">Escalated via PDF Form</option>
				  <option value="transferred">Transferred</option>
				</select>	
			</div>
		
	</body>	
</html>

【问题讨论】：

尝试调用nextElementSibling 而不是nextSibling。
只有两个复选框应该是可见的，它们后面有文字。选择一个复选框将在其下方填充一个下拉列表，滑动下方的复选框和文本以腾出空间。目前，选中复选框没有任何作用。

标签： javascript html google-chrome internet-explorer-8 internet-explorer-11

【解决方案1】：

您不一定需要nextSibling，您需要nextElementSibling。如果父元素后面有空格，则下一个兄弟元素将是 that 空格。因此，您可能希望删除元素与其兄弟元素之间的所有空白，或者调用 nextElementSibling 以保证您不会获得 textNode。

值得注意的是，getElementSibling 仅在 IE 9 及更高版本中受支持。但是，如果您需要 IE 8 支持，您可以简单地删除空格，保留 nextSibling 或 leverage a polyfill。

【讨论】：

这很明显。谢谢！现在，所以这不仅仅是一个“解决我的问题”线程，你能对两者之间的区别进行简短的教育吗？在制作模型时，我正在慢慢学习更多代码。
当然，nextSibling 会返回下一项，不管它是什么。它可以是一个元素或一个文本节点。不过，只有一个元素可以设置样式。通过调用nextElementSibling，您可以获取最近的元素兄弟（可能在一些空白/文本节点之后）。