javascript - BS 3 在单击链接并显示选项卡时获取数据属性值

Question

我正在使用 BS3 并且有这样的选项卡:

<ul class="nav nav-tabs">
  <li class="active"> 
    <a id="tab-1" href="#annual_summary" data-toggle="tab">Annual Summary </a> 
  </li>
  <li> 
    <a id="tab-2" href="#monthly_summary" data-toggle="tab">Monthly Summary 
    </a> 
  </li>
</ul>

我在第一个选项卡中有一个像这样的链接:

<a href="javascript:;" class="btn default btn-xs default button-action" 
   data-id="1" 
   data-year="2014" 
   data-month="January" 
   data-tab-destination="tab-2">
  <i class="fa fa-pencil"></i> Monthly Summary
</a>

当有人点击上面的链接时，它会移动到第二个选项卡。 data-tab-destination="tab-2" 使用此 jquery 代码

 //move to tab 2 
  $("a[data-tab-destination]").on('click', function() {
    var tab = $(this).attr('data-tab-destination');
    $("#" + tab).click();
    $("html, body").animate({
      scrollTop: 0
    }, 500);
  });

在 tab-2 中我有这个 html 标记:

<div class="header-wrapper">
  <input type="hidden" name="id" id="id">
  <p class="header-title">Year:
    <span class="header-text" id="header_year"></span>
  </p>
  <p class="header-title">Month:
    <span class="header-text" id="header_month"></span>
  </p>
</div>

我想要实现的是，当单击链接并移动到第二个选项卡时，我想获取数据属性值 data-year="2014"data-month="January" 并将值放入 #header_year, #header_month 中。

我创建了这个js代码

//TAB ON SHOW
  $("a[href='#monthly_summary']").on('shown.bs.tab', function(event) {
              var div = $(event.relatedTarget)
   var id = div.data('id');
   var year = div.data('year');
   var month = div.data('month');
   var tab = $(this)

   tab.find('#id').attr("value", id);
   tab.find('#header_year').html(year);
   tab.find('#header_month').html(month);
  });

但似乎不起作用:(

请帮助我......谢谢!!

已更新

这是我的工作代码:

  var id;
  var year;
  var month;

    //move to tab 2 when assignment button clicked
      $("a[data-tab-destination]").on('click', function() {

        id = $(this).data('id');
        year =  $(this).data('year');
        month = $(this).data('month');
        var tab = $(this).attr('data-tab-destination');
        $("#" + tab).click();
        $("html, body").animate({
          scrollTop: 0
        }, 500);
      });

      //TAB ON SHOW
      $("a[href='#monthly_summary']").on('show.bs.tab', function() {
           $('#id').attr("value", id);
           $('#header_year').html(year);
           $('#header_month').html(month);
      });

Answer 1

尝试使用div.data('year')而不是div.data('year_filtered');

也尝试使用div.attr('data-year')而不是div.data('year') (仔细看attr)

<小时/>

编辑:在链接中添加一个 id 怎么样？

<a href="javascript:;" class="btn default btn-xs default button-action" 
   id="a-tab-1"
   data-id="1" 
   data-year="2014" 
   data-month="January" 
   data-tab-destination="tab-2">
  <i class="fa fa-pencil"></i> Monthly Summary
</a>

然后用它来获取你的js中的数据

// var div = $(event.relatedTarget)
var div = $('#a-tab-1')