1

感谢您花时间阅读这个问题。

我一直在研究一个greasemonkey 脚本（只是在页面上加载一个额外的javascript 来更改内容），以便为我经常使用的网站添加按钮到Web 表单。

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 个按钮，第二个应该包含 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);

}

问题出现在创建的按钮上。按钮上的名称随每个按钮而变化，因此在此实例中创建的第一个按钮上有“取得联系”，而第二个按钮上有“通话时间”。但是，当单击按钮时，生成的文本是数组中最后一个按钮的文本。

基本上，如果您单击显示“取得联系”的按钮，则出现的文本是“需要工程师”，与“需要 SFI”按钮相关的文本。

这可能是一个有点漫无边际的问题，但我发现很难确切地说出问题所在。我的猜测是变量 row 和 button 在每次迭代时都会被替换，并且 addButton 函数不存储文本，并且每次迭代都会替换创建的文本。

这可能意味着在每次迭代中生成不同的变量名称，可能类似于 title_button_row ，因此第 3 行第二个按钮的标题将是 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 回答