JavaScript 自定义跟踪器

Question

我想为在 CakePHP 2.x 中构建的基于 Web 的应用程序构建一个跟踪系统。这个想法是让所有的跟踪链接都写成如下:

<a 
  href="#" 
  class="track-click" 
  data-tracking='{ 
    "trackers": [
      {
        "tracker": "----", 
        "eventId": "---",
        "tracking_options": { 
          "eventTargetUrl": "---", 
          "props": [{ 
            "key": "----", 
            "value": "---"  
          }]
        } 
      } 
    ]
  }'
/>

处理跟踪请求的 javascript 应该能够收集驻留在数据跟踪属性中的信息。这将通过在“track-click”类的 onClick 事件上附加一个点击事件来完成。

下面是我如何使用上面的链接:

$('.track-click').click(function(e){
  //Lets grab the data thats within the data-tracking attribute and do something with it
  var data = $(this).attr('data-tracking');
  alert(data.trackers);
  e.preventDefault();
});

此时此刻，如果我发出上述警告，我会得到 undefined。如果我将 $(this).attr('data-tracking').val() 放在我的代码上，我会收到以下错误:

TypeError: $(...).attr(...).val is not a function

如上所示，处理具有 json 数据的链接的最佳方式是什么？

Answer 1

你需要使用

var data = JSON.parse($(this).attr('data-tracking'));

这将返回对象。

否则你必须使用

  var data = $(this).data('tracking');

.data() 将返回对象。而 .attr() 将字符串化并返回该对象。

DEMO