Question

我有一个使用HTML中的数据属性的点击应用程序，然后使用jQuery，我想将每个选定的选项保存到数组或作为对象。但我不确定解决这个问题的最佳方法 - 我已经尝试过.data（）和.map（）而没有运气。

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

HTML：

<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>

的jQuery

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;
    }

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

Answer 1

一些问题：

console.log(app)将在页面加载时执行，而不是在用户单击时执行，因此显然它不会输出匿名函数中发生的情况。如果要在那里输出结果，则必须在那里移动console.log(app)语句。
在HTML中，id属性必须具有唯一值，而代码中的choice则不是这种情况。因此，请改为使用class属性替换。
您没有将数据收集到app，而是在每一步都覆盖它。您应该使用app.push不丢失以前存储的数据
this是window对象（或严格模式下的undefined），因此$(this).find('.step')不会返回任何内容。请改用$(document)。
没有必要动态分配id属性值。而是使用一些更智能的选择器。

以下是一些经过修改的代码：

＆＃13;

var app = [];

// hide all steps, except first (don't use this, but document)
$(document).find('.step').slice(1).hide();

$('.step > .choice').click(function(){
    // propertyType = $(this).data('property-type');
    data = $(this).data('app');
    app.push($.map(data, function(value, key){
    // ^^^^^^
        return (key + ' ' + value);
    }));
    console.log(app); // log here!
    nextStep();
});

function nextStep() {
    var $next = $('.step:visible').next('.step');
    $('.step').hide(); // just hide all of them
    $next.fadeIn('fast');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="start step" id="">
    <h2>Select Property Type?</h2>
    <div class="choice" data-app='{"PropertyType" : "single_family"}'>Single Family</div>

    <div class="choice" data-app='{"PropertyType" : "apartment"}'>Apartment</div>

    <div class="choice" data-app='{"PropertyType" : "condo"}'>Condo</div>

    <div class="choice" data-app='{"PropertyType" : "hovel"}'>Hovel</div>
</div>

<div class="step" id="">
    <h2>Are you looking to live in Toronto?</h2>
    <div class="choice" data-app='{"LiveInToronto" : "yes"}'>Yes</div>
    <div class="choice" data-app='{"LiveInToronto" : "no"}'>No</div>
</div>

＆＃13;

注意：我怀疑将键和值串联到数组中是非常有用的。您丢失了JSON数据属性中的结构。

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

1 个答案: