调用 Jquery Val() 后，Append() 不起作用

Question

我是 HTML、JavaScript 和 Jquery 的新手。在我调用 Val("") 之后，我似乎无法弄清楚为什么 Append() 不再将文本附加到 TextArea。我需要调用 Val("") 的原因是我想在每次开始搜索时清除 TextArea 中的文本。所以在 UI 上，我会输入游戏或公司名称的文本，然后按下按钮根据输入字段搜索游戏。下面是我使用的 site.js 中的代码。谢谢。

 var arr = [
    {
        Game:"Double Dragon",
        Developer: "Technos Japan Corp",
        Publisher: "Acclaim",
        Platform: {
            Console: "Nintendo"
        }
    },{
        Game:"Street Fighter 2000",
        Developer: "Capcom",
        Publisher: "Capcom",
        Platform: {
            Console: "Nintendo"
        }   
    },{
        Game:"Super Mario Bros.",
        Developer: "Nintendo",
        Publisher: "Nintendo",
        Platform: {
            Console: "Nintendo"
        }   
    },{
        Game:"Secret Mana",
        Developer: "SquareSoft",
        Publisher: "SquareSoft",
        Platform: {
            Console: "Super Nintendo"
        }   
    },{
        Game:"Final Fight",
        Developer: "Capcom",
        Publisher: "Capcom",
        Platform: {
            Console: "Super Nintendo"
        }   
    },{
        Game:"Super Contra",
        Developer: "Konami",
        Publisher: "Konami",
        Platform: {
            Console: "Nintendo"
        }   
    },{
        Game:"Mega Man",
        Developer: "Capcom",
        Publisher: "Capcom",
        Platform: {
            Console: "Nintendo"
        }   
    }
];


function GameBtnEvent()
{
    //$("#textAreaText").val('');//if I comment this out, Append() call will work, otherwise Append() does not append text to TextArea
    DisplayResults();
}

function DisplayResults()
{
    var found = 0;

    $.each(arr, function (index, value) {
        var gameName = $("#searchTitle").val();
        var companyName = $("#selectionBlock").val();

        if(companyName.toLowerCase() == value.Publisher.toLowerCase())
        {
            $('#textAreaText').append("Title: " + value.Game + "\n");
            $('#textAreaText').append("Company: " + value.Publisher + "\n");
            $('#textAreaText').append("Console: " + value.Platform.Console + "\n\n");
            found = 1;
        }
        else if(companyName.toLowerCase() == value.Publisher.toLowerCase() &&
                 gameName.toLowerCase() == value.game.toLowerCase() )
        {
            $('#textAreaText').append("Title: " + value.Game + "\n");   
            $('#textAreaText').append("Company: " + value.Publisher + "\n");
            $('#textAreaText').append("Console: " + value.Platform.Console + "\n\n");
            found = 1;
        }
    });

    if(found == 0)
    {
        $("#textAreaText").append("game not found");
    }
}

更新： 貌似这种行为只发生在 Chrome 上，但是 Explorer 没有问题。

Answer 1

假设#textAreaText 是一个<textarea> 元素，那么您首先不应该使用append()。在所有情况下都使用val()。如果您需要附加到现有值，请向val() 提供一个函数，该函数接受当前值作为返回新值时可以使用的参数，如下所示：

function GameBtnEvent() {
  $("#textAreaText").val('');
  DisplayResults();
}

function DisplayResults() {
  $.each(arr, function(index, value) {
    if ($("#selectionBlock").val().toLowerCase() == value.Publisher.toLowerCase() || $("#searchTitle").val().toLowerCase() == value.game.toLowerCase()) {
      $('#textAreaText').val(function(i, v) {
          return `${v}Title: ${value.Game}\nCompany: ${value.Publisher}\nConsole: ${value.Platform.Console}\n\n`);
      });
    }
  });

  if (arr.length == 0) {
    $("#textAreaText").val("game not found");
  }
}

另外请注意，我使逻辑更简洁，因为您的两个条件几乎相同，您只需将 AND 逻辑放入 OR 语句中。