Javascript 在jQuery的匿名函数中将HTML5数据写入JSON

我有一个在HTML中使用数据属性的点击式应用程序，然后使用jQuery，我想将每个选择的选项保存到数组或对象中。但我不确定最好的方法是什么——我尝试了.data（）和.map（），但都没有成功

本质上，我只想在每个.step迭代中存储单击的数据应用程序值（并将其保持为JSON格式）。但我不知道如何将数据保存到对象或数组中，我似乎无法在其他地方找到一个很好的解决方案。非常感谢您的帮助

HTML:

在匿名函数之外使用console.log（app）时，它返回未定义。

一些问题：

• console.log（app）

  将在页面加载时执行，而不是在用户单击时执行，因此它显然不会输出匿名函数中发生的事情。如果要在那里输出结果，必须将

  console.log（app）

  语句移动到那里
• 在HTML中，

  id

  属性必须具有唯一的值，这与代码中的

  choice

  不同。因此，替换为

  类

  属性
• 您不是在将数据收集到

  应用程序中，而是在每个步骤中覆盖数据。您应该使用
  app.push
  以避免丢失以前存储的数据

• 顶级代码中的

  此

  是

  窗口

  对象（或严格模式下的

  未定义

  ），因此

  $（此）.find（'.step'）

  不会返回任何内容。改用

  $（文档）

• 不必动态分配

  id

  属性值。相反，使用一些更智能的选择器

下面是一些修改后的代码：

var-app=[]；
//隐藏除第一步以外的所有步骤（不使用此步骤，但使用文档）
$（文档）.find（'.step'）.slice（1.hide（）；
$（'.step>.choice'）。单击（函数（）{
//propertyType=$（this.data（'property-type'）；
data=$（this.data（'app'）；
应用程序推送（$.map）（数据、功能（值、键）{
// ^^^^^^
返回（键+“”+值）；
}));
console.log（app）；//在这里登录！
下一步（）；
});
函数nextStep（）{
var$next=$（'.step:visible'）。next（'.step'）；
$（'.step'）.hide（）；//只需将它们全部隐藏即可
$next.fadeIn（'fast'）；
}

选择属性类型？
单身家庭
公寓
公寓
肮脏简陋的住所
你想住在多伦多吗？
对
不

代码还有其他内容吗？num在哪里定义？这是什么？其他变量在哪里定义的？它有用吗？如果没有，原因是什么？代码已经更新为包含变量。我想知道为什么这会收到否决票，因为我觉得这个答案很有用。有人知道如何访问匿名函数之外的数组吗？或者如何将每次迭代保存到JSON对象，并在匿名函数之外访问它？

<div class="start step" id="">
        <h2>Select Property Type?</h2>
        <div id="choice" data-app='{"PropertyType" : "single_family"}'>Single Family</div>

        <div id="choice" data-app='{"PropertyType" : "apartment"}'>Apartment</div>

        <div id="choice" data-app='{"PropertyType" : "condo"}'>Condo</div>

        <div id="choice" data-app='{"PropertyType" : "hovel"}'>Hovel</div>
    </div>

    <div class="step" id="">
        <h2>Are you looking to live in Toronto?</h2>
        <div id="choice" data-app='{"LiveInToronto" : "yes"}'>Yes</div>
        <div id="choice" data-app='{"LiveInToronto" : "no"}'>No</div>
    </div>

var currentStep = 1;
var num = 1;
var formType = '';
var propertyType = '';
var app = [];

$(this).find('.step').each(function(){
    $(this).attr('id', 'step'+num);
    num++;
    $(this).hide();
});



$('.step > #choice').click(function(){
    // propertyType = $(this).data('property-type');
    data = $(this).data('app');
    app = $.map(data, function(value, key){
        return (key + ' ' + value);
    });
    nextStep();
});


console.log(app);

function nextStep() {
        $('#step' + currentStep).hide();
        currentStep++;
        $('#step' + currentStep).fadeIn('fast');
        return currentStep;
    }