10

私は一連の編集可能なリストを持っており、ボタンを押すだけで、ある種のデータ構造に変換する必要があります。ある種のデータに変換されたら、複製を一緒に追加する必要があります。

例：

  • バナナ200g
  • リンゴ100g
  • リンゴ200g

ある種のデータリストに変換する必要があり、最終的には次のようになります。

  • バナナ200g
  • リンゴ300g

これが私の試みです：

//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。また、データ構造は毎回再初期化されるため、クリックするたびにすべてが2倍になるわけではありません。

$(".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/

2つの入力があります。1つはアイテム名用で、もう1つは金額用です。[追加]をクリックすると、オブジェクトがチェックされ、アイテムがすでに追加されているかどうかが確認されます。その場合、入力に基づいてそのアイテムの金額が増加します。そうでない場合は、指定した金額でそのアイテムを追加します。次に、「ストア」内のすべてのアイテムを使用してulを構築します。

これは手っ取り早い例であるため、型のチェックや検証は行われないことに注意してください:)

于 2012-07-17T13:04:01.157 に答える