时间戳

首页 > 解决方案 > 使用 javascript 更改类的文本

javascript - 使用 javascript 更改类的文本

问题描述

我是 Javascript 新手，

我想使用 Javascript 更改某个文本，例如我有：

<div class="main">
   <div class="price_box"> 0€ </div>
   <div class="price_box"> 100€ </div>
   <div class="price_box"> 45€ </div>
</div>

我只想将“0€”更改为“按要求提供价格”，但我能做的就是全部更改。

我用过这个（如果它正确与否，idk）

function PriceOnRequest()
    {
        
    x=document.getElementsByClassName("price_box");

        /*for(var i = 0; i < x.length; i++){
        x[i].innerText="Price On Request";    // Changes all of them
        }*/
        
        /*for(x.innerText == '0€'){
            x.innerText="Price On Request"; 
        }*/
        
        if(x.innerText == '0€'){
            x.innerText="Price On Request"; 
        }

    }

标签： javascripthtmlclass

解决方案

您可以遍历定价元素并替换文本。

const applyPricing = (selector, zeroText, replacement) => 
  document.querySelectorAll(selector).forEach(priceBox => {
    if (priceBox.textContent.trim() === zeroText) {
      priceBox.textContent = replacement;
    }
  });

applyPricing('.price_box', '0€', 'Price upon request');
.main { border: thin solid grey; }
.price_box { border: thin solid grey; margin: 0.5em; padding: 0.5em; }
<div class="main">
   <div class="price_box"> 0€ </div>
   <div class="price_box"> 100€ </div>
   <div class="price_box"> 45€ </div>
</div>

或者，您可以使用 aMap进行多次替换。

const applyPricing = (selector, replMap) => 
  document.querySelectorAll(selector).forEach(priceBox => {
    const key = priceBox.textContent.trim();
    if (replMap.has(key)) {
      priceBox.textContent = replMap.get(key);
    }
  });

const replMap = new Map(Object.entries({
  '0€': 'Price upon request',
  // More replacements ...
}));

applyPricing('.price_box', replMap);
.main { border: thin solid grey; }
.price_box { border: thin solid grey; margin: 0.5em; padding: 0.5em; }
<div class="main">
   <div class="price_box"> 0€ </div>
   <div class="price_box"> 100€ </div>
   <div class="price_box"> 45€ </div>
</div>

推荐阅读