为什么我不能在 html 页面中使用相同的跨度 ID？

Question

我又回来了，找到一些时间来制作我已经制作了很长时间的文本游戏。我使用javascript手动输入用户必须在商店中选择的列表，这取决于他们的类别。法师比弓箭手或战士有更多的物品，所以我试图在弓箭手/战士和法师之间创建一个div容器，但是当跨度被调用时，只有弓箭手/战士商店的衣服和药剂通过。这似乎是对序列跨度的限制(任何后续调用似乎打破了html文档中的第一个实例)。有没有一种方法可以让它工作而不需要制作一个全新的对象?

<div class="OtherStuff_Container" id="o_shop" style="display: none;">
<div id="OtherStuff_Banner">
<p>Other Stuff</p>
</div>
<div class="Shop_OtherStuff" id="Warrior_Archer's_Other" style="display: none;">
<div id="view1">
<p>Clothing:</p><br />
<p>9.) Boxers: Price: $<span id="Boxers.Value">0</span> &emsp; Amount Left: <span id="Boxers.AmountOf">0</span></p>
<p>10.) Silk Panties: Price: $<span id="SilkPanties.Value">0</span> &emsp; Amount Left: <span id="SilkPanties.AmountOf">0</span></p>
<p>11.) Silk Bra: Price: $<span id="SilkBra.Value">0</span> &emsp; Amount Left: <span id="SilkBra.AmountOf">0</span></p>
<p>12.) G-String: Price: $<span id="GString.Value">0</span> &emsp; Amount Left: <span id="GString.AmountOf">0</span></p>
<p>13.) Pushup Bra: Price: $<span id="PushupBra.Value">0</span> &emsp; Amount Left: <span id="PushupBra.AmountOf">0</span></p>
<p>14.) Thigh Highs: Price: $<span id="ThighHighs.Value">0</span> &emsp; Amount Left: <span id="ThighHighs.AmountOf">0</span></p>
</div>
<div id="view1">
<p>Potions:</p><br />
<p>15.) Health Potion: Price: $<span id="MinorHealthPotion.Value">0</span> &emsp; Amount Left: <span id="MinorHealthPotion.AmountOf">0</span></p>
<p>16.) Stamina Potion: Price: $<span id="MinorStaminaPotion.Value">0</span> &emsp; Amount Left: <span id="MinorStaminaPotion.AmountOf">0</span></p>
<p>17.) Mana Potion: Price: $<span id="MinorManaPotion.Value">0</span> &emsp; Amount Left: <span id="MinorManaPotion.AmountOf">0</span></p>
</div>
</div>
<div class="Shop_OtherStuff1" id="Mage's_Other" style="display: none;">
<div id="view1">
<p>Clothing:</p><br />
<p>10.) Boxers: Price: $<span id="Boxers.Value">0</span> &emsp; Amount Left: <span id="Boxers.AmountOf">0</span></p>
<p>11.) Silk Panties: Price: $<span id="SilkPanties.Value">0</span> &emsp; Amount Left: <span id="SilkPanties.AmountOf">0</span></p>
<p>12.) Silk Bra: Price: $<span id="SilkBra.Value">0</span> &emsp; Amount Left: <span id="SilkBra.AmountOf">0</span></p>
<p>13.) G-String: Price: $<span id="GString.Value">0</span> &emsp; Amount Left: <span id="GString.AmountOf">0</span></p>
<p>14.) Pushup Bra: Price: $<span id="PushupBra.Value">0</span> &emsp; Amount Left: <span id="PushupBra.AmountOf">0</span></p>
<p>15.) Thigh Highs: Price: $<span id="ThighHighs.Value">0</span> &emsp; Amount Left: <span id="ThighHighs.AmountOf">0</span></p>
</div>
<div id="view1">
<p>Potions:</p><br />
<p>16.) Health Potion: Price: $<span id="MinorHealthPotion.Value">0</span> &emsp; Amount Left: <span id="MinorHealthPotion.AmountOf">0</span></p>
<p>17.) Stamina Potion: Price: $<span id="MinorStaminaPotion.Value">0</span> &emsp; Amount Left: <span id="MinorStaminaPotion.AmountOf">0</span></p>
<p>18.) Mana Potion: Price: $<span id="MinorManaPotion.Value">0</span> &emsp; Amount Left: <span id="MinorManaPotion.AmountOf">0</span></p>
</div>
</div>

上面是我的html代码看起来像。再一次，勇士射手的其他工作得很好，是法师的其他似乎不想把数据推过去。

Answer 1

要成为有效的HTML,id必须是唯一的

这是HTML中id的定义强加给我们的。具体来说:

当在HTML元素上指定时，id属性值必须在元素树中的所有id中唯一，并且必须包含at至少一个字符。

不能包含ASCII空格。id属性指定其元素的惟一标识符(ID)。

有没有其他限制身份证可以采取什么形式;在具体来说，id可以仅由数字组成，以数字开头，start带有下划线，只包含标点符号等

元素的唯一标识符可以用于多种目的，作为链接到文档特定部分的一种方式，使用片段，作为在编写脚本时瞄准元素的一种方式，以及作为一种方法设置CSS中特定元素的样式

你可以很容易地使它们独一无二

一个简单的方法是在每个id前面加上section id。

<div class="OtherStuff_Container" id="o_shop" style="display: none;">
<div id="OtherStuff_Banner">
<p>Other Stuff</p>
</div>
<div class="Shop_OtherStuff" id="Warrior_Archer's_Other" style="display: none;">
<div id="view1">
<p>Clothing:</p><br />
<p>9.) Boxers: Price: $<span id="Shop_OtherStuff.Boxers.Value">0</span> &emsp; Amount Left: <span id="Shop_OtherStuff.Boxers.AmountOf">0</span></p>
<p>10.) Silk Panties: Price: $<span id="Shop_OtherStuff.SilkPanties.Value">0</span> &emsp; Amount Left: <span id="Shop_OtherStuff.SilkPanties.AmountOf">0</span></p>
</div>
<div id="view1">
etc
</div>
</div>
<div class="Shop_OtherStuff1" id="Mage's_Other" style="display: none;">
<div id="view1">
<p>Clothing:</p><br />
<p>10.) Boxers: Price: $<span id="Shop_OtherStuff1.Boxers.Value">0</span> &emsp; Amount Left: <span id="Shop_OtherStuff1.Boxers.AmountOf">0</span></p>