TypeError:无法设置undefined的属性'data_id'

Question

我的js代码存在一些问题,我不知道如何修复它这是我的代码:

  $('#btn_valid').click(function(){

    var data = new Array();
    var data_id;
    var data_picture;
    var data_title;
    var data_p_picture;
    var data_p_title;
    var data_s_picture;
    var data_s_title;
    var data_reaction;
    var data_datetime;
    var i = 0;


    $('.cbx_ac:checked').each(function(){

      data_id = $(this).attr('data-id');
      data_picture = $(this).attr('data-picture');
      data_title= $(this).attr('data-title');
      data_p_picture = $(this).attr('data-p_picture');
      data_p_title = $(this).attr('data-p_title');
      data_s_picture = $(this).attr('data-s_picture');
      data_s_title = $(this).attr('data-s_title');
      data_reaction = $(this).attr('data-reaction');
      data_datetime = $(this).attr('data-datetime');

      console.log(data_id); // I Get a value here ( 2564115647_15498456665 )

      data[i]['data_id'] = data_id;  //Error here :  Uncaught TypeError: Cannot set property 'data_id' of undefined
      i++;

    })
    console.log(data);
  })

我得到这个错误我尝试设置数据[i] = []但似乎不是解决方案:

Error here :  Uncaught TypeError: Cannot set property 'data_id' of undefined

Answer 1

这个问题是因为data[i]是undefined.因此,您尝试设置属性undefined,因此设置错误.

要解决此问题,您需要先创建一个对象data[i],如下所示:

data[i] = {};
data[i]['data_id'] = data_id;
// and so on...

但值得注意的是,您可以大规模简化此逻辑并将其干掉.当您访问data()元素的方法时,它将返回对象中的所有属性.因此,只要属性名称与您要创建的对象的属性名称匹配,您就可以使用map()以下命令将其应用于数组:

$('#btn_valid').click(function() {
  var data = $('.cbx_ac:checked').map(function() {
    return $(this).data();
  }).get();
  console.log(data);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="cbx_ac" data-id="id1" data-picture="pic1" data-title="title1" checked="true" />
<input type="checkbox" class="cbx_ac" data-id="id2" data-picture="pic2" data-title="title2" />
<input type="checkbox" class="cbx_ac" data-id="id3" data-picture="pic3" data-title="title3" checked="true" />
<input type="checkbox" class="cbx_ac" data-id="id4" data-picture="pic4" data-title="title4" />
<input type="checkbox" class="cbx_ac" data-id="id5" data-picture="pic5" data-title="title5" />

<button id="btn_valid">Test</button>

请注意,上面的示例缺少dataHTML中的一些属性,但这只是为了简洁起见.您可以在生产版本中轻松添加它们.