无法检索存储在数据属性下的数据

时间:2016-12-16 11:26:19

标签: jquery

我正在读一个名为 Tag_Details 的内部数组,  如果它的长度大于3,我会附加点并将数据存储在与tagid相关联的数据属性下以便以后检索它

如果长度大于3,我将附加数据如下所示

这是我的代码

displayallVideos(json)

  function displayallVideos(response)
  {
          var videolisthtml = '';
          total_records = response.total_count;
           var span = '';
          for (var i = 0; i < response.Video_details.length; i++)
          {
                  var video_id = response.Video_details[i].video_id;
                  var video_name = response.Video_details[i].video_name;
                  var video_file = response.Video_details[i].video_file;
                  var how_to_video = response.Video_details[i].how_to_video;
                  var video_created_date = response.Video_details[i].video_created_date
                  videolisthtml += '<tr class="portlettr"  id="tagnames'+video_id+'" data-stuff="" data-id="' + video_id + '">\
                            <td>' + video_name + '</td>\n\
                            <td>'+ response.Video_details[i].video_file.split('/').pop() + '</td>\n'
                  var vd = response.Video_details[i].Tag_Details;
                  videolisthtml += '<td>\n';
                  for (var j = 0; j < vd.length; j++)
                  {
                          var tag_name = vd[j].tag_name;
                            span = '<span class="btn btn-sm btn-success btn-circle"></span> ';
                          if (j < 3)
                          {
                                  videolisthtml += span.split("</span>").join(tag_name + "</span>");
                          }
                          else
                          {
                               span = '<span class="btn btn-sm btn-success btn-circle btnredcolor"></span> ';
                                  var valuefromutility = getcommasperatedvalue(vd);
                                  videolisthtml += span.split("</span>").join('...' + "</span>");
                                     $("#tagnames" + video_id).data('stuff', valuefromutility).attr('data-stuff', JSON.stringify(valuefromutility));
                                  break;
                          }
                  }
                  videolisthtml += '</td>\n';
                  videolisthtml += '<td>' + video_created_date + '</td>\n\
                            </tr>';
          }
          $("#videolisttable tbody").html(videolisthtml);
  }

  function getcommasperatedvalue(arr)
  {
          var arrayafter3elemnts = '';
          for (var i = 0; i < arr.length; i++)
          {
                  if (i > 2)
                  {
                          if (i === arr.length - 1)
                          {
                                  arrayafter3elemnts += arr[i].tag_name;
                          }
                          else
                          {
                                  arrayafter3elemnts += arr[i].tag_name + ',';
                          }
                  }
          }
          return arrayafter3elemnts;
  }


  $(document).on('click', '.btnredcolor', function(event)
{
          var video_id = $(this).closest('.portlettr').data("id");
        var vendoritemsdata = $("#tagnames" + video_id).data('stuff');
        alert(vendoritemsdata);
});

这是我的小提琴

http://jsfiddle.net/cod7ceho/402/

请告诉我如何解决这个问题

1 个答案:

答案 0 :(得分:0)

如果你没有对你的数据属性做任何特殊的事情(IE用它来表示json字符串等),你也可以使用attr(&#39; data-stuff&#39;)来调用它。

数据(&#39; stuff&#39;)调用尝试解析字符串,但也可以缓存该值,因此在再次调用时不会重新检查它。

尽管如此,在使用属性时,你的元素实际上并不在页面上,但它们只是一串html。我已经将每个元素添加到一个数组中,然后迭代它们以便在页面上添加它们。

http://jsfiddle.net/cod7ceho/412/

valuesfromutility["#tagnames" + video_id] = valuefromutility;

然后

      if ($(valuesfromutility).length) {
          $.each(valuesfromutility, function(element, value){
              $(element).attr('data-stuff', value);
          });
      }