JS脚本只能在一个html卡上使用，而不是全部

debugcn 发表于 Dev

菲拉斯·里汉（Firas Rihan）

因此，如果我从html中的select标签中选择了货币，则此脚本会更改货币和符号，但是问题是它仅更改了第一张卡的货币和符号，而其他卡没有更改。有没有一种方法可以同时更改它们而不用为每张卡编写脚本？select的工作方式如下：如果我选择LBP并且货币为USD，则该数字将乘以8500，如果选择美元且货币为LBP，则它将除以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;
  }
 }
}

礼节

使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。