Question

我有一个元素列表，每个元素都有一个span类的size元素，我想将每个元素转换为可读值（字节=> kb，mb等）。）我不确定如何更新页面上的这些值。

Codepen： https://codepen.io/x84733/pen/GGGEzx?editors=1010

function formatBytes(bytes,decimals) {
    if(bytes == 0) return '0 Bytes';
    var k = 1024,
        dm = decimals || 2,
        sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
        i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}


var size = document.getElementsByClassName("size");


function updateValue(v){
    size.innerHTML = formatBytes(v);
}


for (var i = 0; i < size.length; i++) {
    updateValue(size.item(i));
}

<ul>
  <li><span class="size">875</span></li>
  <li><span class="size">25984</span></li>
  <li><span class="size">12525125</span></li>
  <li><span class="size">23234</span></li>
  <li><span class="size">325235</span></li>
  <li><span class="size">0</span></li>
  <li><span class="size"></span></li>
</ul>

Answer 1

您要传递给formatBytes的是span元素，而不是其内容。您还试图在innerHTML（这是一个HTMLCollection）上而不是在您传递的元素（size）上设置v。相反：

function updateValue(span) {
    span.innerHTML = formatBytes(parseFloat(span.innerHTML));
}

或者您可以使用textContent而不是innerHTML。

一些注意事项：

您可以使用size[i]而不是size.item(i)。旧的item函数有点陈旧。
您永远不需要调用parseFloat的结果，/的结果就是已经始终是一个数字。
强烈建议命名包含复数形式的列表，数组，集合等的变量。例如/或类似名称，而不是sizeSpans。
如果您需要支持IE8（希望您不支持），则它没有size，但确实有getElementsByClassName，它更具通用性（接受任何有效的CSS）选择器）：querySelectorAll。
类似地，如果您需要支持IE8，请注意它没有var size = document.querySelectorAll(".size")。

Answer 2

您只需要首先：传递项目在列表中的位置第二：您将方法应用于项目本身，但需要在innerHTML

上执行

function updateValue(v, i){
     size.item(i).innerHTML = formatBytes(parseFloat(v.innerHTML));
}

        function formatBytes(bytes,decimals) {
            if(bytes == 0) return '0 Bytes';
            var k = 1024,
                dm = decimals || 2,
                sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
                i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
        }

        
        var size = document.getElementsByClassName("size");


        function updateValue(v, i){
            if(v.innerHTML.length > 0){
            size.item(i).innerHTML = formatBytes(parseFloat(v.innerHTML));
}
        }


        for (var i = 0; i < size.length; i++) 
        {
            updateValue(size.item(i), i);
        }

        <ul>
          <li><span class="size">875</span></li>
          <li><span class="size">25984</span></li>
          <li><span class="size">12525125</span></li>
          <li><span class="size">23234</span></li>
          <li><span class="size">325235</span></li>
          <li><span class="size">0</span></li>
          <li><span class="size"></span></li>
        </ul>

如何更改具有指定类的每个html元素的值？

2 个答案: