gpt4 book ai didi

javascript - SPAN 只显示部分 ID

转载 作者:行者123 更新时间:2023-11-30 16:16:44 26 4
gpt4 key购买 nike

我喜欢用 JS/php 编写一个小的邮政计算器,但在 JS 方面不是很有经验我有一个(对我来说)我无法理解的奇怪问题。 SPAN 元素将显示所有或第一个(有时是前几个)数据。但我无法选择特定的 ID。

注意 - 该代码不完整。

document.getElementById('au').innerHTML     = 'AU1 ec-ship $: ' + 30,
document.getElementById('ca').innerHTML = 'CA ec-ship $: ' + ((((Math.ceil(userInput2 / 10) * 10) - 30)/10 * 1.7) +7).toFixed(2),
document.getElementById('ru').innerHTML = 'RU ec-ship $: ' + ((((Math.ceil(userInput2 / 10) * 10) - 30)/10 * 1.7) +7).toFixed(2),
document.getElementById('uk').innerHTML = 'UK ec-ship $: ' + ((((Math.ceil(userInput2 / 10) * 10) - 30)/10 * 1.7) +7).toFixed(2),
document.getElementById('us').innerHTML = 'US1 ec $: ' + ((((Math.ceil(userInput2 / 10) * 10) - 30)/10 * 1.7) +7).toFixed(2),
document.getElementById('fr').innerHTML = 'FR ec-ship $: ' + ((((Math.ceil(userInput2 / 10) * 10) - 30)/10 * 1.7) +7).toFixed(2),
document.getElementById('de').innerHTML = 'DE ec-ship $: ' + 28

<span id='au'></span><br>
<span id='ca'></span><br>
<span id='ru'></span><br>
<span id='uk'></span><br>
<span id='us'></span><br>
<span id='fr'></span><br>
<span id='de'></span><br>

我真正想要的是选择一个,“我们”即:

 <span id='us'></span><br>

但这根本行不通。正确的做法是什么?

最佳答案

更新

http://plnkr.co/edit/Q88TrGz9ItD28WqUxo7k?p=preview

片段

OP 请求 <span>可以任意组合显示。所以下面的更新涉及<input type="checkbox"><labels>和 2 行 CSS。



http://plnkr.co/edit/0r0nBLF6W1BrSwxwpbbn?p=preview

  • 将你的 JS 放在 <script> 中阻止
  • 您的代码看起来很像 PHP,用很多“,”而不是“;”终止语句。
  • 添加了输入和事件监听器。
  • 忽略代码片段,只查看 Plunker。

<!DOCTYPE html>
<html>

<head>
<style>
.chk + label {
display: none;
}
.chk:checked + label {
display: inline-block;
}
</style>
</head>

<body>

<input id="inp2" name="inp2" />
<br/>

<input id="aux" class="chk" type="checkbox" />
<label for="aux"><span id='au'></span>
</label><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;UA1</span>
<br>
<input id="cax" class="chk" type="checkbox" />
<label for="cax"><span id='ca'></span>
</label><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CA</span>
<br>
<input id="rux" class="chk" type="checkbox" />
<label for="rux"><span id='ru'></span>
</label><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RU</span>
<br>
<input id="ukx" class="chk" type="checkbox" />
<label for="ukx"><span id='uk'></span>
</label><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;UK</span>
<br>
<input id="usx" class="chk" type="checkbox" />
<label for="usx"><span id='us'></span>
</label><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;US1</span>
<br>
<input id="frx" class="chk" type="checkbox" />
<label for="frx"><span id='fr'></span>
</label><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FR</span>
<br>
<input id="dex" class="chk" type="checkbox" />
<label for="dex"><span id='de'></span>
</label><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DE</span>

<script>
var input2 = document.getElementById('inp2');

input2.addEventListener('input', function(e) {
var userInput2 = parseFloat(input2.value);
document.getElementById('au').innerHTML = 'AU1 ec-ship $: ' + 30;
document.getElementById('ca').innerHTML = 'CA ec-ship $: ' + ((((Math.ceil(userInput2 / 10) * 10) - 30) / 10 * 1.7) + 7).toFixed(2);
document.getElementById('ru').innerHTML = 'RU ec-ship $: ' + ((((Math.ceil(userInput2 / 10) * 10) - 30) / 10 * 1.7) + 7).toFixed(2);
document.getElementById('uk').innerHTML = 'UK ec-ship $: ' + ((((Math.ceil(userInput2 / 10) * 10) - 30) / 10 * 1.7) + 7).toFixed(2);
document.getElementById('us').innerHTML = 'US1 ec $: ' + ((((Math.ceil(userInput2 / 10) * 10) - 30) / 10 * 1.7) + 7).toFixed(2);
document.getElementById('fr').innerHTML = 'FR ec-ship $: ' + ((((Math.ceil(userInput2 / 10) * 10) - 30) / 10 * 1.7) + 7).toFixed(2);
document.getElementById('de').innerHTML = 'DE ec-ship $: ' + 28;
}, false);
</script>
</body>

</html>

关于javascript - SPAN 只显示部分 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35389425/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com