Question

我喜欢在JS / php中写一个小邮政计算器，而且在JS中没有很多经验我有一个（对我来说）我无法理解的奇怪问题。 SPAN元素将显示ALL或第一个（有时是前几个）数据。但是我无法选择特定的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>

我真正想要的是选择一个，＆＃39;我们＆＃39;即：

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

但这根本不起作用。什么是正确的方法？

Answer 1

<强>更新

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很多＆＃34;，＆＃34;而不是＆＃34;;＆＃34;终止声明。
添加了一个输入和事件监听器。
忽略该片段只需查看Plunker。

＆＃13;

<!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>

＆＃13;

SPAN仅显示一些ID

1 个答案: