通过脚本更改 Span Class 的文本 (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.500,00                </span>
        </p>

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

我只需要将文本 "Preço Promocional"（在 "price-label" class 内）替换为 "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 returns 一个集合而不是单个元素。在您的示例中，您有两个具有相同 class 名称的元素，您将访问索引为 0 的第一个元素和索引为 的第二个元素1.

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

<p class="special-price">
    <span class="price-label">Preço Promocional</span>
    <span class="price" id="product-price-1046">R.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>

这将针对带有 class 价格标签 的所有元素，内部带有 class 特价[=47] 的元素=], 遍历每一个并改变它们的内容。主要产品、相关产品、推荐产品只要在创建后放上去就可以了。

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

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

这应该隐藏内容，然后将文本添加到父级上，不需要放在末尾也能正常工作。

// 编辑（解决此答案评论中添加的新信息）

为了避免改变首页，可以使用:not()css'伪class(infohere) 以排除在主页中找到的 special-price 实例。我搜索了主页唯一的 ID 或 class（在主页的 body 标签上找到了 class 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>

通过脚本更改 Span Class 的文本 (magento)

Changing the Text of a Span Class by script (magento)

html

magento