10

我有一系列可编辑的列表，只需按一下按钮，就可以将其转换为某种数据结构。当它变成某种数据时，我需要将重复项添加在一起。

例子：

  • 200克香蕉
  • 100克苹果
  • 200克苹果

应该变成某种数据列表，最终应该是这样的：

  • 200克香蕉
  • 300克苹果

这是我的尝试：

//button click event
$(".calculate").bind("click", function(e)
{
    //get the correct parent of the button
    var parent = $(this).closest("#calc");

    //get relevant data
    parent.find(".options").each(function(index, element)
    {
        var opt1 = $(this).children(".opt1").children("input").val(); //weight
        var opt2 = $(this).children(".opt2").children("input").val(); //ingredient
    });
});

基本上我单击按钮，上面的脚本会找到所有相关数据。

如何将其转换为多维数组或可以在其中搜索重复项的对象列表？

当我尝试创建一个动态对象时，它似乎失败了，当我创建一个多维数组进行搜索时，我被 inArray 无法搜索它们所阻止。

问题回顾： 我能够毫无问题地获取用户数据。把它变成一个列表并将重复项加在一起是问题所在。

4

3 回答 3

8

我建议你有一个包含摘要的全局对象，它看起来像这样：

$(".calculate").bind("click", function(e)
{
    var fruits = {};

    //get the correct parent of the button
    var parent = $(this).closest("#calc");

    //get relevant data
    parent.find(".options").each(function(index, element)
    {
        var opt1 = $(this).children(".opt1").children("input").val(); //weight
        var opt2 = $(this).children(".opt2").children("input").val(); //ingredient

        // here is my code
        if(fruits[opt2] == undefined) {
            fruits[opt2] = opt1;
        } else {
            // assuming that opt1 is an integer
            fruits[opt2] += opt1;
        }
    });

    // use fruits variable here
});
于 2012-07-17T12:53:15.870 回答
4

100g这是另一个变体，如果您有输入，它也会进行一些简单的解析，而不是100. 此外，数据结构每次都会重新初始化，因此每次点击都不会翻倍。

$(".calculate").bind("click", function(e)
{
    //get the correct parent of the button
    var parent = $(this).closest("#calc");

    var ingredients = {};

    var extractWeight = function (input) {
        // you can add other logic here
        // to parse stuff like "1kg" or "3mg"

        // this assumes that everything is
        // in grams and returns just the numeric
        // value
        return parseInt(input.substring(0, input.length - 1));
    }

    //get relevant data
    parent.find(".options").each(function(index, element)
    {
        var opt1 = $(this).children(".opt1").children("input").val(); //weight
        var opt2 = $(this).children(".opt2").children("input").val(); //ingredient

        // initialize to 0 if not already initialized
        ingredients[opt2] = ingredients[opt2] ? ingredients[opt2] : 0;
        ingredients[opt2] += extractWeight(opt1);
    });
});​

以下是一些提示：

  • {}称为对象字面量，用于创建新的空对象
  • 可以通过[]符号动态访问对象成员（即 if x === "name"then o[x] === o.name）
  • 变量在范围内相同级别或更深的函数内部可见 - 就像我ingredients在each函数中使用的示例一样。
  • JavaScript 中的数组仅支持数字键，因此您不会拥有 PHP 的“关联数组”之类的东西。对象填补了 JS 中的这一空白。
于 2012-07-17T13:03:02.103 回答
2

这是一个 jsFiddle，它可以满足您的需求:) http://jsfiddle.net/LD9TY/

它有两个输入，一个用于项目名称，另一个用于金额。当您单击添加时，它会检查一个对象以查看该项目是否已添加。如果是这样，它会根据您的输入增加该项目的金额。如果没有，它会将该项目添加到您指定的数量。然后它会用你的“商店”中的所有项目构建一个 ul。

请注意，这是一个快速而肮脏的示例，因此没有进行类型检查或验证:)

于 2012-07-17T13:04:01.157 回答