1

この質問を読んでくれてありがとう。

私は、頻繁に使用するサイトの Web フォームにボタンを追加するために、グリースモンキー スクリプト (ページに追加の JavaScript をロードしてコンテンツを変更するだけ) に取り組んでいます。

var gt_all_the_stocks = [
    [   // Greetings
        ["Getting in touch", "Thank you for getting in touch,\n\n", "", "", "Added thank you", "",],
        ["Time on phone", "Thank you for your time on the phone today,\n\n", "", "", "Added thank you", "",],
        ["Getting back", "Thank you for getting back to us,\n\n", "", "", "Added thank you", "",],
    ],
    [   // Faults Stocks
        ["SFI Required", "An engineer is needed", "", "", "", "", ],    
    ]
];

配列は、ボタンの各行が個別の配列であり、各ボタンがその行の要素になるようにフォーマットされています。上記の配列では、2 行のボタンを作成する必要があります。最初の行には 3 つのボタンが含まれ、2 番目の行には 1 つのボタンが含まれている必要があります。

私は次のように書いています。

//Create a button function
function addButton(container, text, onclickFunc) {
    // Create a new button
    var buttonnode= document.createElement('input');

    // Set some generic attributes
    buttonnode.setAttribute('type','button');
    buttonnode.setAttribute('name',text);
    buttonnode.setAttribute('value',text);
    buttonnode.setAttribute('class', 'gt_buttons');

    // Attach the event
    container.appendChild(buttonnode)
    buttonnode.addEventListener("click", onclickFunc, true);

    // Return it
    return buttonnode;
}

// Iterate through the array and make the buttons
for (var i1 = 0; i1 < gt_all_the_stocks.length; i1++) {

    console.log("Setting up row #" + i1 + " " + typeof i1);
    row = i1;

    for (var i2 = 0; i2 < gt_all_the_stocks[i1].length; i2++) {

        button = i2;

        addButton(make_div_above, gt_all_the_stocks[row][button][0], function(){
            if ( gt_all_the_stocks[row][button][1].length != 0 ){
                surround("", gt_all_the_stocks[row][button][1]);
            }
            if ( gt_all_the_stocks[row][button][2].length != 0 ){
                setSMS(gt_all_the_stocks[row][button][2]);
            }
            if ( gt_all_the_stocks[row][button][3].length != 0 ){
                setSignoff(gt_all_the_stocks[row][button][3]);
            }
            if ( gt_all_the_stocks[row][button][4].length != 0 ){
                console.log("Stock Tickets: " + gt_all_the_stocks[row][button][4]);
            }
            if ( gt_all_the_stocks[row][button][5].length != 0 ){
                setCause(gt_all_the_stocks[row][button][5]);
            }
        });
    }
    addHr(make_div_above);

}

作成されたボタンで問題が発生します。ボタンの名前はボタンごとに変わるため、このインスタンスで作成された最初のボタンには「Getting in contact」、2 番目のボタンには「Time on phone」が表示されます。ただし、ボタンをクリックすると、配列内の最後のボタンのテキストが生成されます。

基本的に「お問い合わせ」というボタンをクリックすると出てくるテキストは「エンジニアが必要です」で、ボタンに関連するテキストは「SFIが必要です」です。

これは少しとりとめのない質問かもしれませんが、問題が何であるかを正確に言うのは難しいと思います. 私の推測では、変数行とボタンは反復ごとに置き換えられ、addButton 関数はテキストを保存せず、反復ごとに作成されたテキストを置き換えています。

潜在的にこれは、反復ごとに異なる変数名を生成することを意味します。おそらく title_button_row のようなもので、行 3 の 2 番目のボタンのタイトルは title_1_2 になりますが、その方法はわかりません。PHP は $title_$button_$row のような変数名をサポートしていますが、これを Javascript で実装する方法や、これがこの問題の解決策である場合でも、私にはわかりません。

参照用にスクリプト全体の要点をここに掲載しましたhttps://gist.github.com/lgoldstien/5890269

繰り返しますが、お読みいただきありがとうございます。返信をお待ちしております。

4

1 に答える 1

0

DOM を処理する関数を呼び出すとloops、発生しているような問題が発生します。これを克服するために、人々は次のようなさまざまなアプローチを使用しますArray.forEach。Closures

addButton自己実行匿名関数内に呼び出しをラップし、変数をそれに渡します。あなたの問題は解決されます。あなたが のファンかどうかはわかりませんArray.forEach。Closureそこで、ここでアプローチを提案し ました。

このように:(for ループ部分のみ)

for (var i1 = 0; i1 < gt_all_the_stocks.length; i1++) {

console.log("Setting up row #" + i1 + " " + typeof i1);
row = i1;

for (var i2 = 0; i2 < gt_all_the_stocks[i1].length; i2++) {

    button = i2;

    (function(r, btn) {
      addButton(make_div_above, gt_all_the_stocks[r][btn][0], function(){
        if ( gt_all_the_stocks[r][btn][1].length != 0 ){
          surround("", gt_all_the_stocks[r][btn][1]);
        }
        if ( gt_all_the_stocks[r][btn][2].length != 0 ){
          setSMS(gt_all_the_stocks[r][btn][2]);
        }
        if ( gt_all_the_stocks[r][btn][3].length != 0 ){
          setSignoff(gt_all_the_stocks[r][btn][3]);
        }
        if ( gt_all_the_stocks[r][btn][4].length != 0 ){
          console.log("Stock Tickets: " + gt_all_the_stocks[r][btn][4]);
        }
        if ( gt_all_the_stocks[r][btn][5].length != 0 ){
          setCause(gt_all_the_stocks[r][btn][5]);
        }
      });
    })(row, button);
}
addHr(make_div_above);

}
于 2013-06-29T08:19:19.257 に答える