Question

我有十行，每行包含4列，现在我想获取使用localStorage导入的值。我找到了一种方法来独立地放置所有这些值，但代码是重复的。这些将导致代码冗余。我想知道是否有办法使用循环缩短代码？

这是我的代码

 var res = {};
    $(function(){
     $('#subbtn').click(function() {
      console.log($('#tab').find('tr'))
      $('tr').each(function(){
          var tmp = [];
          var cl ;
          $(this).find('select').each(function(){
            cl = $(this).attr('class');
            //console.log(cl);
            tmp.push($(this).val());
          })

          res[cl] = tmp
      })
        console.log(res);
       localStorage.setItem("testingvalue",JSON.stringify(res));
       document.getElementById("results__display").innerHTML = (localStorage.getItem("testingvalue"));
     })

    })
    $( document ).ready(function(){
   var res = {};
   try { 
    console.log('existed');
      res = JSON.parse(localStorage.getItem("testingvalue"));

   //alert(res.r1[2]);
   document.getElementsByClassName("r1")[0].selectedIndex=res.r1[0];
   document.getElementsByClassName("r1")[1].selectedIndex=res.r1[1];
   document.getElementsByClassName("r1")[2].selectedIndex=res.r1[2];
   document.getElementsByClassName("r1")[3].selectedIndex=res.r1[3];

   document.getElementsByClassName("r2")[0].selectedIndex=res.r2[0];
   document.getElementsByClassName("r2")[1].selectedIndex=res.r2[1];
   document.getElementsByClassName("r2")[2].selectedIndex=res.r2[2];
   document.getElementsByClassName("r2")[3].selectedIndex=res.r2[3];

   document.getElementsByClassName("r3")[0].selectedIndex=res.r3[0];
   document.getElementsByClassName("r3")[1].selectedIndex=res.r3[1];
   document.getElementsByClassName("r3")[2].selectedIndex=res.r3[2];
   document.getElementsByClassName("r3")[3].selectedIndex=res.r3[3];

   document.getElementsByClassName("r4")[0].selectedIndex=res.r4[0];
   document.getElementsByClassName("r4")[1].selectedIndex=res.r4[1];
   document.getElementsByClassName("r4")[2].selectedIndex=res.r4[2];
   document.getElementsByClassName("r4")[3].selectedIndex=res.r4[3];

   document.getElementsByClassName("r5")[0].selectedIndex=res.r5[0];
   document.getElementsByClassName("r5")[1].selectedIndex=res.r5[1];
   document.getElementsByClassName("r5")[2].selectedIndex=res.r5[2];
   document.getElementsByClassName("r5")[3].selectedIndex=res.r5[3];

   document.getElementsByClassName("r6")[0].selectedIndex=res.r6[0];
   document.getElementsByClassName("r6")[1].selectedIndex=res.r6[1];
   document.getElementsByClassName("r6")[2].selectedIndex=res.r6[2];
   document.getElementsByClassName("r6")[3].selectedIndex=res.r6[3];

   document.getElementsByClassName("r7")[0].selectedIndex=res.r7[0];
   document.getElementsByClassName("r7")[1].selectedIndex=res.r7[1];
   document.getElementsByClassName("r7")[2].selectedIndex=res.r7[2];
   document.getElementsByClassName("r7")[3].selectedIndex=res.r7[3];

   document.getElementsByClassName("r8")[0].selectedIndex=res.r8[0];
   document.getElementsByClassName("r8")[1].selectedIndex=res.r8[1];
   document.getElementsByClassName("r8")[2].selectedIndex=res.r8[2];
   document.getElementsByClassName("r8")[3].selectedIndex=res.r8[3];

   document.getElementsByClassName("r9")[0].selectedIndex=res.r9[0];
   document.getElementsByClassName("r9")[1].selectedIndex=res.r9[1];
   document.getElementsByClassName("r9")[2].selectedIndex=res.r9[2];
   document.getElementsByClassName("r9")[3].selectedIndex=res.r9[3];

   document.getElementsByClassName("r10")[0].selectedIndex=res.r10[0];
   document.getElementsByClassName("r10")[1].selectedIndex=res.r10[1];
   document.getElementsByClassName("r10")[2].selectedIndex=res.r10[2];
   document.getElementsByClassName("r10")[3].selectedIndex=res.r10[3];

    } 

    catch (error){
       console.log(error.message);
   }


});

Answer 1

看着这条重复的一句话：

document.getElementsByClassName("r1")[0].selectedIndex=res.r1[0];

...一个简单的第一步改进就是使用带有变量的嵌套for循环而不是"r1"和0：

for (var r = 1; r <= 10; r++) {
  for (var i = 0; i < 4; i++) {
    document.getElementsByClassName("r" + r)[i].selectedIndex = res["r" + r][i];
  }
}

请注意，这意味着.getElementsByClassName("r" + r)调用对r的每个值发生四次，这不是非常有效 - 最好将其移动到外部循环中：

var els;
for (var r = 1; r <= 10; r++) {
  els = document.getElementsByClassName("r" + r);
  for (var i = 0; i < 4; i++) {
    els[i].selectedIndex = res["r" + r][i];
  }
}

在第二个版本中，内部循环可以说i < els.length而不是i < 4，但请注意，无论哪种方式，您都需要确保将HTML元素的数量与{中的项目数量相匹配{1}}对象。

Answer 2

无论存储中的数据大小如何，以下代码均可使用：

res = JSON.parse(localStorage.getItem("testingvalue"));
  // Let's start with checking 'res' type.
  // - if it's an Array, get the the length from .length
  // - if it's Object, get the the length from Object.keys().length
  var resLength = Array.isArray(res) ? res.length : typeof res === 'object' ? Object.keys(res).length : 0;
  // loop throw the rows.
  for (var i = 0; i < resLength; i++) {
    // Do the same as above: get type of the row and calculate it length for the loop.
    var rowLength = Array.isArray(res[i]) ? res.length : typeof res[i] === 'object' ? Object.keys(res[i]).length : 0;
    // loop throw the columns on the row.
    for (var j = 0; j < rowLength; j++) {
      document.getElementsByClassName('r'+i)[j].selectedIndex=res['r'+i][j];
    }
}

Answer 3

您似乎已加载了jQuery库。使用jQuery使这更容易。

以下是一个例子：

var res = JSON.parse(localStorage.getItem("testingvalue"));
$("tr select").each(function(){
   $(this).val(res[$(this).attr("class")][$(this).index()]);
});

当然，这仅在select元素只有一个类名且res对象包含select内所有tr元素的值时才有效元素。基于您问题中的jQuery代码，似乎就是这种情况。

这是一种更安全的方法

Object.keys(res).forEach(function(key){
    res[key].forEach(function(val, index){
        $("tr select." + key).eq(index).val(val);
    });
});

如何将这些重复的JavaScript代码缩短为循环？

3 个答案: