Question

我正在构建一个价格估算器表单，它使用jQuery来操作选择菜单。基本上，当选择新数量时，每个选择菜单中每个选项的值乘以每单位价格，并向用户显示新价格。

我要做的是从PHP文件中提取每单位价格，该文件将这些价格存储在一系列数组中; e.g：

<?php
    // prices.php
    $colorPrices = array(2.339,3.195,6.537,2.614,2.614,1.759);
    $json = json_encode($colorPrices);
    echo $json;
?>

保持阵列分离将使我的jQuery更清洁，并且更容易更新定价。

在我计算总价的jQuery文件中，我正在读这样的JSON：

$.getJSON('prices.php',function(data) {
    var colorArray = data;
})

此时，colorArray是一个对象，所以它对jQuery的这一点并不好看：

// whenever a new COLOR is chosen, step through colorArray and multiply by the currently selected QUANTITY
$('#colors option').each(function(i){
    $(this).attr('label',qty * colorArray[i]);
});

我的想法是，如果我可以将colorArray转换为数组，我可以遍历其内容。现在，当我选择一种新颜色时没有任何反应。

我是否接近或无能为力？

Answer 1

colorArray将是

形式的数组

[2.339, 3.195, 6.537, 2.614, 2.614, 1.759]

根据the php json_encode() documentation。

我整理了一个 Working Demo 来演示如何将JSON字符串中返回的数据作为数组处理。将 / edit 添加到网址以查看代码。

演示代码

$(function() {

  $('button').click(function() {

    // the URL is just another page on jsbin.com that contains 
    // this string - ["2.339","3.195","6.537","2.614","2.614","1.759"]
    $.getJSON('http://jsbin.com/amibo', function(data) {

      $.each(data, function(i,v) {
        $('<div>').text(v).appendTo('body');
      });

    });

  });

});

请注意，在您的示例中，colorArray在AJAX请求完成时执行的函数内部声明，因此在该范围之外不可用。您可以使用更高范围的变量来捕获返回的数据，也可以在回调函数内执行迭代。

修改

我看过your code here，你需要这样的东西

$('#quantity').change(function() { var qty = $('option:selected', this).val(); switch (qty) { case '250': $.getJSON('scripts/jsondata.php',function(data) { // call the new updateOptionLabels function updateOptionLabels(qty, data); // I'm not sure if you needed this part as it seems to // essentially duplicate the new updateOptionLabels function // I've commented out but I may misunderstand what you're doing /* $.each(data, function(i, value) { $('#colors option').eq(i).attr('label',qty * value); }); */ }); break; case '500': // ditto, but retrieving a different array break; // etc... default: alert("Default"); break; } // I'd like to use that local "colorArray" variable here function updateOptionLabels(qty, arr) { $('#colors option').each(function(i) { $(this).attr('label',qty * arr[i]); }); } });

我介绍了一个用于更新选项标签的新功能。此函数的范围限定为在<select>上标识为quantity的更改事件时执行的函数。变量qty可以在每个case语句中的getJSON()命令的回调函数内部使用，因为它在回调函数的范围之外声明。 data变量和qty都传递到updateOptionLabels()函数，以便在每个case语句中不重复此代码。这可能会提前完善。我暂时评论了$.each()因为看起来你正在尝试用它做什么现在由updateOptionLabels()函数处理。

我建议你看看Doug Crockford的优秀Survey of the JavaScript Programming Language，特别是关于功能的部分。另请参阅Mozilla优秀的Core JavaScript 1.5参考资料。 Here's the section on Functions and function scope

Answer 2

我不清楚$('#colors option')代码块是否在获取JSON数据的方法内。您将colorsArray定义为JSON函数中的 local 变量。这意味着它无法在外面访问。我的猜测是你的问题。

在Javascript中，如果省略函数中变量声明前面的var，则将该变量设为全局变量，因此可以在代码的其他部分中访问。这通常不值得推荐，但它应该为你做到这一点。

您通过JSON获取的数据已经采用数组格式，您可以通过数组语法引用对象成员，因此这不是问题的根源。

如何将JSON对象转换为数组以在jQuery中使用？

2 个答案: