Trim 使用普通 JavaScript 来自输入标签范围的小数
Trim decimals from input label span using plain JavaScript
我正在使用一个 wordpress 插件,它生成的代码如下所示:
<div class=" product-addon product-addon-extra-tip">
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0">
<label>
<input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="2" data-price="2" value="2"> (<span class="amount">.00</span>)</label>
</p>
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-1">
<label>
<input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="5" data-price="5" value="5"> (<span class="amount">.00</span>)</label>
</p>
</div>
您可以看到 <span>
包含带小数点的美元值。我想 trim 每个实例的小数点和尾随零。
我知道使用 toFixed()
应该可以做到这一点,但我不知道究竟如何才能仅针对那些特定的 <span>
。我不能简单地通过 amount
的 class 名称来 select,因为它在别处使用。
因此,我需要在 <div>
和 class product-addon
中使用 class amount
定位 <span>
。我需要从那些 <span>
s.
中的字符串中删除小数点
所以使用 querySelectorAll 和 select 他们
var spans = document.querySelectorAll("dov.product-addon span.amount");
console.log(spans.length);
并遍历集合。
使用以下 javascript 到 trim 来自 spans
的所有小数和尾随零 div
with class product-addon
.
var links = document.getElementsByClassName("product-addon");
var span = links[0].getElementsByTagName("span");
console.log(span.length);
for (var i = 0; i < span.length; i++) {
span[i].innerText = span[i].innerText.split('.')[0];
}
<div class=" product-addon product-addon-extra-tip">
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0">
<label>
<input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="2" data-price="2" value="2"> (<span class="amount">.00</span>)</label>
</p>
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-1">
<label>
<input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="5" data-price="5" value="5"> (<span class="amount">.00</span>)</label>
</p>
</div>
我正在使用一个 wordpress 插件,它生成的代码如下所示:
<div class=" product-addon product-addon-extra-tip">
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0">
<label>
<input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="2" data-price="2" value="2"> (<span class="amount">.00</span>)</label>
</p>
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-1">
<label>
<input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="5" data-price="5" value="5"> (<span class="amount">.00</span>)</label>
</p>
</div>
您可以看到 <span>
包含带小数点的美元值。我想 trim 每个实例的小数点和尾随零。
我知道使用 toFixed()
应该可以做到这一点,但我不知道究竟如何才能仅针对那些特定的 <span>
。我不能简单地通过 amount
的 class 名称来 select,因为它在别处使用。
因此,我需要在 <div>
和 class product-addon
中使用 class amount
定位 <span>
。我需要从那些 <span>
s.
所以使用 querySelectorAll 和 select 他们
var spans = document.querySelectorAll("dov.product-addon span.amount");
console.log(spans.length);
并遍历集合。
使用以下 javascript 到 trim 来自 spans
的所有小数和尾随零 div
with class product-addon
.
var links = document.getElementsByClassName("product-addon");
var span = links[0].getElementsByTagName("span");
console.log(span.length);
for (var i = 0; i < span.length; i++) {
span[i].innerText = span[i].innerText.split('.')[0];
}
<div class=" product-addon product-addon-extra-tip">
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0">
<label>
<input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="2" data-price="2" value="2"> (<span class="amount">.00</span>)</label>
</p>
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-1">
<label>
<input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="5" data-price="5" value="5"> (<span class="amount">.00</span>)</label>
</p>
</div>