更新活动类更改时的数据属性值

Question

尝试创建一个函数，每次.active类更改元素时，console.logs与.active类关联的数据属性。

到目前为止，我只能得到第一个元素的.active类的初始数据属性值。在.active类更改元素后调用该函数会产生与最初调用该函数相同的结果。

// Variables
var activeItem = document.querySelectorAll('.active');

// Get the Data-Targ value from the .active_class
 var  active_href = function() {
    for (i = 0; i < activeItem.length; ++i) {
      var reports = activeItem[i].dataset.targ;
      console.log('data-targ of .active is: ' + reports);
    }
  };

在回复评论时，这就是我最初附加.active类的方式。 它被附加到父容器的第一个子容器。 （基本上，它包含的ul的第一个li）

  var first_child = ul.children[0];
  var active = first_child.classList.add('active');

因此，active_href不会调用沿着ul＆gt;的动态更新的.active类位置。通过包含添加和删除活动类的事件处理程序的Next和Previous按钮发生的li链。