Question

我正在尝试为我的HTML代码创建一个简单的标题间隔符，这样我就不必输入＆＃34;＆amp; nbsp＆＃34;很多，所以代码看起来更多吃。但是我创造了这个：

$(function() {
    var subSpace = document.getElementById("subSpace");
    var titleName = document.getElementById("subSpace").value;
    subSpace.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + titleName;
    return false;
});

但它只针对此代码运行一次：

<li><a href="#" id="subSpace" value="Start Menu"     ></a></li>
<li><a href="#" id="subSpace" value="Tiles"      ></a></li>
<li><a href="#" id="subSpace" value="Action Center" ></a></li>
<li><a href="#" id="subSpace" value="Settings"       ></a></li>
<li><a href="#" id="subSpace" value="Customizations"></a></li>
<li><a href="#" id="subSpace" value="Windows Search"></a></li>
<li><a href="#" id="subSpace" value="Microsoft Edge"></a></li>

所以它运行开始菜单并按照我想要的方式正确地隔开它但是没有运行磁贴，动作中心等。有没有办法解决这个问题？我错过了什么吗？因为我还在学习，我可能会离开。提前谢谢！

Answer 1

那是因为您有多个ID为subSpace的元素。你应该只使用一次id。如果您有多个具有相同ID的元素，则第一个元素将仅匹配。

另外，在旁注中，您应该使用CSS来设置页面样式（即添加间隔符/边距/填充）。

Answer 2

您应该使用类而不是ID，因为ID应该是唯一的。除此之外，您可以使用CSS在左侧添加填充：

.subspace {
  padding-left:10px;
}

<li><a href="#" class="subspace">Start Menu</a></li>
<li><a href="#" class="subspace">Tiles</a></li>
<li><a href="#" class="subspace">Action Center</a></li>
<li><a href="#" class="subspace">Settings</a></li>
<li><a href="#" class="subspace">Customizations</a></li>
<li><a href="#" class="subspace">Windows Search</a></li>
<li><a href="#" class="subspace">Microsoft Edge</a></li>

Answer 3

您有id个重复项。如果您需要选择多个元素，请使用class。您可以使用JQuery

选择它们

<a href="#" id="subSpace" value="Start Menu" class="subSpace">

在你的js中：

$('.subSpace').html('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');

我在这里看到另一个答案，它提出了一种更好的方法，只使用CSS。你也应该考虑这一点。

javascript getElementById和InnerHTML仅对html

3 个答案: