javascript - JS 脚本仅适用于一张 html 卡而不是所有卡

Question

因此，如果我从 html 中的选择标记中选择了货币，则此脚本会更改货币和符号，但问题是它仅更改第一张卡的货币和符号，而其他卡则不会。有没有办法同时更改它们，而无需为每张卡编写脚本？ 选择的工作原理如下:如果我选择 LBP 并且货币为 USD，则该数字将乘以 8500，如果选择 USD 并且货币为 LBP，则该数字将除以 8500，而如果我选择相同的货币，则该数字将除以 8500。选择之后什么也不会发生。

HTML:

<div class="card">
        <img class="imgcar" src="cars/402088-2020-land-rover-range-rover-velar.jpg" alt="Avatar" style="width:16em">
        <div class="container">
          <h4><b>Range Rover Velar</b><br><b>4 Doors</b><br><b> 5 Passengers</b> </h4>
          <div><p id="price">100</p><p id="symbol">$</p><p id="duration">/24hrs</p></div>
        </div>
      </div>
      <div class="card">
        <img class="imgcar" src="cars/2020-BMW-M8-Competition-Convertible-02-e1570483239877.jpg" alt="Avatar"
          style="width: 16em;">
        <div class="container">
          <h4><b>BMW M8</b><br><b>2 Doors</b><br><b> 2 Passengers</b></h4>
          <p id="price">150</p><p id="symbol">$</p><p id="duration">/24HRS</p>
        </div>
      </div>

JS:

function report(currencyy) {
var price = document.getElementById("price");
var symbol = document.getElementById("symbol");

if (currencyy == "lbp") {
  if (symbol.textContent == "$") {
    symbol.textContent = "lbp";
    var text = price.textContent;
    var number = parseInt(text) * 7500;
    price.textContent = number;
  }
 }
 if (currencyy == "usd") {
  if (symbol.textContent == "lbp") {
    symbol.textContent = "$";
    var text = price.textContent;
    var number = parseInt(text) / 7500;
    price.textContent = number;
  }
 }
}

Answer 1

使用document.querySelectorAll()并迭代卡片节点:

const currencies = { //--> store the currency data
  lbp: {
    symb: "lbp",
    fn: value => Number(value) * 7500
  },
  usd: {
    symb: "$",
    fn: value => Number(value) / 7500
  }
};

function report(currencyy) {
  var cardNodes = document.querySelectorAll(".card");
  Array.from(cardNodes).forEach(card => { // --> update the card node data
    const symbNode = card.querySelector("#symbol");
    const priceNode = card.querySelector("#price");
    const { symb, fn } = currencies[currencyy];
    if (symbNode.textContent === symb) return;
    symbNode.textContent = symb;
    priceNode.textContent = fn(priceNode.textContent);
  });

  
}

report("usd");

<div id="app"></div>
<div class="card">
    <img class="imgcar" src="cars/402088-2020-land-rover-range-rover-velar.jpg" alt="Avatar" style="width:16em">
    <div class="container">
        <h4><b>Range Rover Velar</b><br><b>4 Doors</b><br><b> 5 Passengers</b> </h4>
        <div>
            <p id="price">100</p>
            <p id="symbol">$</p>
            <p id="duration">/24hrs</p>
        </div>
    </div>
</div>
<div class="card">
    <img class="imgcar" src="cars/2020-BMW-M8-Competition-Convertible-02-e1570483239877.jpg" alt="Avatar"
          style="width: 16em;">
    <div class="container">
        <h4><b>BMW M8</b><br><b>2 Doors</b><br><b> 2 Passengers</b></h4>
        <p id="price">150</p>
        <p id="symbol">$</p>
        <p id="duration">/24HRS</p>
    </div>
</div>