Question

我需要创建一个表，其中将显示6个值。这6个值应根据此页面中可用的一个数字进行更改。 让该号码称为X 。这意味着，当X处于某些范围内（应为13）时，所有6个价格应立即更改。这意味着差异为 n（范围数）=方案的数量，因为如果X在一个范围内，则将所有6个价格同时更改为一个。

我有2个问题（我对JS不太满意，我计划将这一挑战作为学习它的起点）：

我试图做表格，但是我很难理解如何使数字X等于var。
如果这种方法还可以，因为对我来说看起来很普通，那么它将变得很大，然后添加所有13个范围。

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-s268{text-align:left}
.tg .tg-0lax{text-align:left;vertical-align:top}
</style>
<table class="tg">
  <tr>
    <th class="column-title-1"></th>
    <th class="column-title-2">Summer</th>
    <th class="column-title-3">Winter</th>
  </tr>
  <tr>
    <td class="row-title-1">Store 1</td>
    <td id="premium-price-1">no price</td>
    <td id="premium-price-2">no price</td>
  </tr>
  <tr>
    <td id="row-title-2">Store 2</td>
    <td id="deductible-price-1">no price</td>
    <td id="deductible-price-2">no price</td>
  </tr>

    <tr>
    <td id="row-title-3">Store 3</td>
    <td id="replacement-price-1">no price</td>
    <td id="replacement-price-2">no price</td>
  </tr>

</table>

<!-- AVAILABLE SOMEWHERE ON THE PAGE--><p><span id="price-amount">240</span></p>

var loose = document.getElementsByClassName("price-amount");

if (100 < loose && loose < 200) {
document.getElementById("premium-price-1").innerHTML = "18";
document.getElementById("premium-price-2").innerHTML = "20";
document.getElementById("deductible-price-1").innerHTML = "120";
document.getElementById("deductible-price-2").innerHTML = "130";
document.getElementById("replacement-price-1").innerHTML = "200";
document.getElementById("replacement-price-2").innerHTML = "220";
} else if (200 < loose && loose < 300) {
 document.getElementById("premium-price-1").innerHTML = "22";
document.getElementById("premium-price-2").innerHTML = "25";
document.getElementById("deductible-price-1").innerHTML = "125";
document.getElementById("deductible-price-2").innerHTML = "135";
document.getElementById("replacement-price-1").innerHTML = "220";
document.getElementById("replacement-price-2").innerHTML = "230";
} else {
document.getElementById("premium-price-1").innerHTML = "25";
document.getElementById("premium-price-2").innerHTML = "29";
document.getElementById("deductible-price-1").innerHTML = "130";
document.getElementById("deductible-price-2").innerHTML = "145";
document.getElementById("replacement-price-1").innerHTML = "240";
document.getElementById("replacement-price-2").innerHTML = "270";
}

这是一个JSFiddle，代码为：https://jsfiddle.net/fxbopt1h/

所有这些操作背后的想法是放在不同的页面上，并根据每页的X值在表格中显示正确的6个数字。

我希望我能解释一切，我知道这也许是愚蠢的方法，但是请以正确的方式帮助我。

Answer 1

要获取值，最好在此输入而不是跨度

<input id="price-amount" type="number"/>

要获得该价值，您只需执行此操作

var loose = document.getElementById("price-amount").value;

如果没有模式，我们将无法执行计算价格的功能，因此您将不得不手动添加价格（或在需要时从数据库获取价格）。

但是我们能做的就是添加一个函数，您将价格传递给它，这将只给我们提供一个要编写的函数和IF：

var loose = document.getElementById("price-amount").value;

function setPrices(p1, p2, p3, p4, p5, p6) {
  document.getElementsById('premium-price-1').textContent = p1;
  document.getElementsById('premium-price-2').textContent = p2;
  document.getElementsById('deductible-price-1').textContent = p3;
  document.getElementsById('deductible-price-2').textContent = p4;
  document.getElementsById('replacement-price-1').textContent = p5;
  document.getElementsById('replacement-price-2').textContent = p6;
}

设置功能后，您现在只需使用正确的参数调用该功能即可更改IF中的价格

if (100 < loose && loose < 200) {
  setPrices(18, 20, 120, 130, 200, 220);
} else if (200 < loose && loose < 300) {
  setPrices(22, 25, 125, 135, 220, 230);
} else {
  setPrices(25, 29, 130, 140, 240, 270)
}

那样，如果您需要更改功能，则只需在一个地方进行操作，并且可读性强，只需确保以正确的顺序传递正确的数字即可。

注意-，请注意，您的IF范围仅为200 > x < 300，因此，如果价格恰好是200，它将转到其他而不是范围内进行更改您还需要测试是否相等200 >= x <= 300。

if (loose >= 100 && loose < 200) {} else if (loose >= 200 && loose < 300) {}

更新

如果无法更改跨度的一部分，则需要获取其文本。

var loose = document.getElementById("price-amount").textContent;

有效的提琴：https://jsfiddle.net/b9suq0pg/9/

更新2

您还需要检查跨度是否为数字，以确保不会弹出错误。

if（！isNaN（loose））{}

有效的提琴：https://jsfiddle.net/b9suq0pg/10/

如何根据同一页上存在的数字来固定值更改表

1 个答案: