Question

感谢您抽出宝贵时间阅读此问题。

我一直在研究一个greasemonkey脚本（只是在页面上加载一个额外的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", "", "", "", "", ],    
    ]
];

对数组进行格式化，每行按钮都是一个单独的数组，每个按钮都是该行的元素。所以给定上面的数组，我应该创建两行按钮，第一行应该包含3个按钮，第二个按钮包含第二个按钮。

我写了以下内容：

//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);

}

问题出现在创建的按钮上。按钮上的名称随每个按钮而变化，因此在此实例中创建的第一个按钮上有“Get in touch”，而第二个按钮上有“Time on phone”。但是，单击该按钮时，生成的文本是数组中最后一个按钮的文本。

基本上，如果您点击“联系”按钮，出现的文字是“需要工程师”，与“SFI必需”按钮相关的文字。

这可能是一个有点夸张的问题，但我发现很难确切地说出问题所在。我的猜测是每次迭代都会替换变量行和按钮，而addButton函数不存储文本，每次迭代都会替换创建的文本。

这可能意味着在每次迭代时生成一个不同的变量名称，也许类似于title_button_row，因此对于第3行的第二个按钮的标题将是title_1_2，但不知道如何做到这一点。 PHP支持变量变量名称，如$ title_ $ button_ $ row但我不知道如何实现这是Javascript，或者即使这是解决此问题的方法。

我在这里提出了整个脚本的要点，以供参考https://gist.github.com/lgoldstien/5890269

再次感谢阅读，我期待着您的回复。

Answer 1

调用处理来自loops的DOM的函数会导致您遇到的问题。为了克服这个问题，人们使用各种方法，如Array.forEach，Closures

在自执行匿名函数＆amp;中包裹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);

}

在javascript中迭代数组以在表单上生成按钮

1 个答案:

像这样:(只是for循环部分）