Question

我正在开发一个Javascript的个人项目，让人们可以创建一个梦幻游戏表＃34;在拼字游戏中。这是链接：mmenu.js

我目前正在尝试允许用户编辑梦幻游戏。

这是我的代码：

function editRow(e)
{
    var eventEl = e.srcElement || e.target, 
    parent = eventEl.parentNode
    parent = parent.parentNode
    var test = $(parent.cells[0]).text()
    $('tr').each(function(){
        $(this).children("td:contains(test)").each(
            function()
            {
                pageEnd.innerHTML += "success"
                $(this).addClass('selected')
            }
        )
    })
    pageEnd.innerHTML += test
    //pageEnd.innerHTML += $(parent.cells[3]).text()
    insertRow()
}

// insertRow assumes that the correct row in the table has the "selected" class added to it
function insertRow()
{
    var Row = $('<tr>').append(
        $('<td>').append('<input id="input1">'),
        $('<td>').append('<select id="input2"><option value=""></option><option value="Yes">Yes</option><option value="No">No</option></select>'),
        $('<td>').append('<select id="input3"><option value=""></option><option value="Natural">Natural</option><option value="1 Blank Used">1 Blank Used</option><option value="2 Blanks Used">2 Blanks Used</option></select>'),
        $('<td>').append('<select id="input4"><option value=""></option><option value="vs Computer">vs Computer</option><option value="Online Game">Online Game</option><option value="Friendly Game">Friendly Game</option><option value="Club Game">Club Game</option><option value="Tournament Game">Tournament Game</option></select>'),
        $('<td>').append('<input id="input5">')
    )
    $("#myTable tr.selected").after(Row)
}

现在我只是想让我的代码在表格中插入一行。我试图通过使用代码$(this).addClass('selected')来标记用户选择的行，然后在我的插入函数中使用它来插入行。然而，似乎没有任何事情发生。我使用pageEnd.innerHTML += "success"作为调试工具来查看它是否到达那里。出乎意料的是，当它只打印一次时，它会成功打印两次，因为在测试中，每个单词都是唯一的。

无论如何，我无法弄清楚它为什么不起作用。任何帮助表示赞赏。谢谢，~Adam

Answer 1

试试这个：

function editRow(e) {
    var eventEl = e.srcElement || e.target, 
    parent = eventEl.parentNode
    parent = parent.parentNode
    var test = $(parent.cells[0]).text()
    $('tr').each(function(){

        var outerThis = this;

        outerThis.children("td:contains(test)").each(
            function()
            {
                pageEnd.innerHTML += "success";

                $(this).children().css('text-align', 'center');
            }
        )
    })
    pageEnd.innerHTML += test
    //pageEnd.innerHTML += $(parent.cells[3]).text()
    insertRow()
}

我将外部this设置为您可以使用的变量。另外textAlign不是jQuery函数。您需要使用.css()，然后在其中指定text-align。

Answer 2

您有两种方法可以实现这一目标：

第一个正如其他人所建议的那样，即通过保留外部this的变量然后使用它：

$('tr').each(function() {

     var outerThis = this;
     // inside another loop (not sure about children method, just an example)
     $(outerThis).children("td:contains(test)").each(function() {
          // do something with outerThis to operate on further
     });
});

使用Javascript＆＃39; bind()方法的另一种选择：

$('tr').each(function(i, trElement) {
     // this == trElement

     // inside another loop
     $(outerThis).children("td:contains(test)").each(function(index, tdElement) {
          $(this) // will be now tr element
          $(tdElement) // will be td element
     }.bind(this));
});

如何使用jquery在javascript中使用$（this）和foreach

2 个答案: