插件输出 WordPress 的整数

Question

预订插件将价格显示为带 2 位小数的数字。 由于我找不到要连接的过滤器，我想我可能需要一个 JS 循环。

页面上有几处房产的价格为 123.45 美元。我想把它四舍五入到 123 美元

价格的html是：

<span class="price"><span class="currency">$</span>"123,45<span>

我尝试了一个循环，但我不是很擅长 JS：

  function roundPrice() {

let oldPrices = document.getElementsByClassName("price");

for (let i = 0; i < oldPrices.length; i++) {

    // strip $ of price
    oldPrices[i] = oldPrices[i].substr[1];

    // string to num
    oldPrices[i] = parseInt(oldPrices[i]);

    // round number
    let newPrice = Math.round(oldPrices[i]);

        return oldPrices[i] = newPrice;

    }
}

    roundPrice();

但这不起作用。有这样的解决方案吗？

非常感谢，山姆

Answer 1

这个问题有两个部分：如何编写函数以改变相关 DOM 元素中的价格，以及如何让函数在 Wordpress 中运行。

在第一部分，问题中的代码有一些问题。直接的主要是document.getElementsByClassName("price") 返回一个元素集合，而不是字符串数组。

请仔细阅读这段代码，了解如何遍历这些元素并操作它们的 HTML。

function roundPrice() {
let oldPrices = document.getElementsByClassName("price");//this gives you the collection of elements which have class price

for (let i = 0; i < oldPrices.length; i++) {

    // Note: oldprices[i] is an element NOT a string
    let price = oldPrices[i].innerHTML;//this should give you <span class="currency">$</span>"123,45

    let priceArray = price.split('>');//this will give you an array and you want the last bit
    let oldPrice = priceArray.pop();

    
    //now you have the actual price, but with , where JS would expect .
    oldPrice = oldPrice.replace(',','.');
    
    //now you can do the rounding
    let newPrice = Math.round(Number(oldPrice));// NOT parseInt

    //now we put the new price back into the element's innerHTML
    priceArray.push(newPrice);

    //then we write the innerHTML back into the element
    oldPrices[i].innerHTML = priceArray.join('>');
    }
}
//it would be a good idea to put some prefix of your own on this function name so it doesn't clash with any other plugin using function round
    roundPrice();

<span class="price"><span class="currency">$</span>1234567,89</span>
<span class="notprice"><span class="currency">$</span>9999,01</span>
<span class="price and some"><span class="currency">$</span>888</span>
<span class="price"><span class="currency">$</span>123,45</span>
<span class="price"><span class="currency">$</span>123</span>

第二部分是如何最好地将这个 JS 链接到相关的 Wordpress 页面。在我们最终决定之前，响应 cmets 需要一些进一步的信息，但要记住的重要一点是它必须在 DOM 加载后运行。

注意：虽然上面的代码回答了设置编码的问题，但可以说这不是实现这一目标的最佳方式。像这样“即时”更改 HTML 可能会导致其他问题——尤其是如果插件开发人员更改了 HTML 的格式。有没有办法改变插件，例如通过选择一些货币设置？