无法访问 Javascript 变量

Question

我有一个将在点击时触发的函数(使用 jQuery)。

我不明白为什么以下内容不起作用并显示未定义。

var testFunc = function(event) {
    var data     = event.data;
    var category = data.category;
    var action   = data.action;
    var label    = data.label;

    console.debug(data);
    // prints:
    // {'category': 'CCC', 'action': 'AAA', 'label': 'LLL'}

    console.debug(data.category);
    // prints: undefined

    console.debug(category);
    // prints: undefined

    console.debug(data[category]);
    // prints: undefined
};
$(document).ready(function() {
    $('.test').on('click', function() {
        var jsonData;
        try {
            jsonData = JSON.parse($(this).data('test'));
        }
        catch (e) {
            // I guess here is the problem:
            jsonData = $(this).data('test');
            // ..but why JSON.parse doesn't work
        }

        try {
            testFunc({ data: jsonData });
        } catch (e) {
        }
    });
});

HTML:

<a href="about:blank" target="_blank" class="test"
   data-test="{'category': 'CCC'}">click event triggered here</a>

如何访问 event.data.category ？

fiddle :http://jsfiddle.net/ytqp45wj/

Answer 1

event.data 是您的 fiddle 中的一个字符串。

那是因为您在 data-test 字段中的 JSON 无效。因此，您在解析异常处理程序时传入异常处理程序，并使用 String 本身。

(根据 http://jsonlint.com/，似乎您不能在 JSON 中使用单引号)

正如别处所指出的，您可以在数据属性中使用双引号来解决问题。

请注意 data[category] 无论如何都不起作用，因此您仍然会得到 undefined。