英文:
Replace dot with comma of text which is not in DOM while loading
问题
需要修改WordPress主题中计数器动画的输出。页面加载时有一个空的span，如下所示：
<span class="counter"></span>
动画完成后，span看起来像这样：
<span class="counter">30.5</span>
由于这是一个德语网站，输出需要使用逗号而不是点，所以它应该看起来像这样：30,5
如何实现这一点？
阅读类似的帖子，看起来我需要一个WebKitMutationObserver（？），但我没有使用它的经验。感谢任何帮助！
英文:
I'm using a WordPress Theme and need to modify the output of a counter animation.
While the page is loading, there is an empty span like this:
<span class="counter"></span>
After the animation is finished, the span looks like this:
<span class="counter">30.5</span>
Since it is a german website the output needs to be with a comma instead of a dot, so it should look like this: 30,5
How can I achieve this?
Reading similar posts it looks like I need a WebKitMutationObserver (?) but I have no experience using it. Thanks for any help!
答案1
得分: 1
以下是您要翻译的内容：
const elCounter = $('#counter');
$('button').on('click', () => {
$({progress: 0}).animate(
{progress: 1000}, {
duration: 30000,
step: val => {
elCounter.text((val / 10).toFixed(2));
}}
)
});
new MutationObserver(() => {
const replacement = elCounter.text().replace('.', ',');
if(elCounter.text() !== replacement){
elCounter.text(replacement);
}
})
.observe(elCounter[0], { childList: true });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="counter">0</div>
<button>Go progress</button>
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const elCounter = $('#counter');
$('button').on('click', () => {
$({progress: 0}).animate(
{progress: 1000}, {
duration: 30000,
step: val => {
elCounter.text((val / 10).toFixed(2));
}}
)
});
new MutationObserver(() => {
const replacement = elCounter.text().replace('.', ',');
if(elCounter.text() !== replacement){
elCounter.text(replacement);
}
})
.observe(elCounter[0], { childList: true });
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="counter">0</div>
<button>Go progress</button>
<!-- end snippet -->
答案2
得分: 0
使用 value.toLocaleString('en-de', {...}) 将解决您的需求。
const counterElement = document.querySelector('.counter');
const value = parseFloat(counterElement.textContent);
const formattedValue = value.toLocaleString('en-de', {
minimumFractionDigits: 1,
maximumFractionDigits: 1
});
counterElement.textContent = formattedValue;
<span class="counter">30.5</span>
英文:
Using value.toLocaleString('en-de',{...}) will solve your purpose
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const counterElement = document.querySelector('.counter');
const value = parseFloat(counterElement.textContent);
const formattedValue = value.toLocaleString('en-de', {
minimumFractionDigits: 1,
maximumFractionDigits: 1
});
counterElement.textContent = formattedValue;
<!-- language: lang-html -->
<span class="counter">30.5</span>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论