通过脚本（magento）更改跨度类的文本

Question

你好。首先，很抱歉最终出现英语错误，因为我是巴西人：

我有一个基于 magento 1.9.2.2 的电子商务，托管它的公司不允许用户访问服务器文件（页眉、正文、页脚等）。您只能通过 css 和 html 外部脚本编辑网站。

于是有了这个 div：

                <p class="old-price">
            <span class="price-label">De:</span>
            <span class="price" id="old-price-1046">
                R$2.500,00                </span>
        </p>

                        <p class="special-price">
                **<span class="price-label">Preço Promocional</span>**
            <span class="price" id="product-price-1046">
                R$2.299,90                </span>
            </p>

我只需要将文本“Preço Promocional”（在“价格标签”类中）替换为“Por：”

到目前为止，我已经尝试过： document.getElementsByClassName('price-label').innerHTML = 'Por:'; javascript:document.getElementsByClassName('price-label').innerHTML = 'Por:'; javascript:void(document.getElementsByClassName('price-label').innerHTML = 'Por:');

提前感谢您的帮助...

Answer 1

getElementsByClassName 返回一个集合而不是单个元素。在您的示例中，您有两个具有相同类名的元素，您可以使用索引 0 访问第一个元素，使用索引 1 访问第二个元素。

<p class="old-price">
    <span class="price-label">De:</span>
    <span class="price" id="old-price-1046">R$2.500,00</span>
</p>

<p class="special-price">
    <span class="price-label">Preço Promocional</span>
    <span class="price" id="product-price-1046">R$2.299,90</span>
</p>

<script>
    document.getElementsByClassName('price-label')[1].innerHTML = "Por:";
</script>

这段代码将把第二个写着“Preço Promocional”的代码改成“Por:”

//编辑

现在我已经看到了完整的页面，在 javascript 中您可以通过以下方式实现：

<script>
document.querySelectorAll('.special-price .price-label').forEach(function(node) {
    node.innerHTML = 'Por: ';
});
</script>

这将针对具有 special-price 类的元素内的所有具有 price-label 类的元素，循环遍历每个元素并更改其内容。这将更改主要的、相关的和推荐的产品，只要它是在创建之后放置的。

作为首选替代方案，请尝试使用以下 css：

<style>
.special-price .price-label {
    display:none !important;
}
.special-price::before {
    content: 'Por: ';
}
</style>

这应该隐藏内容，然后在父级上添加文本，并且不需要放在最后才能工作。

// EDIT（解决在 cmets 中为此答案添加的新信息）

为了避免更改主页，您可以使用 :not() css 的伪类 (info here) 来排除那些 特价 的实例strong> 在主页中找到。我搜索了主页独有的 id 或类（在主页的 body 标记上找到了类 cms-home），因此我使用它来排除和定位不同的 价格标签。我还更改了字体大小以匹配原始大小：

<style>
// this targets price-label that's NOT in the homepage
body:not(.cms-home) .special-price .price-label {
    display:none !important;
}
body:not(.cms-home) .special-price::before {
    content: 'Por: ';
    font-size:15px;
}
// this targets price-label on the homepage
.cms-home .special-price .price-label {
    display:none !important;
}
</style>

如果我理解正确，在主页上您只是隐藏文本，而在其他页面上您将其替换为“Por：”，这应该这样做（希望）除非我有另一个特殊情况不知道。

Answer 2

试试这个

<script>
            $('.special-price .price-label').text('Por:');
</script>