Question

我试图理解为什么一个版本的代码可以正常工作而另一个版本没有。我希望我已经包含了足够的信息。我是从不再支持的在线教程中学习的。

在教程中，说明书写了这样的代码：

$(document).ready(function(){
    $("form").submit(function() {
    var input = $("#command_line").val();
    console.log(input)
    console.log("submit")

    if (input === "help") {
        $("#message_help").clone().insertBefore("placeholder").fadeIn(1000);
    }
});

$("#command_line").val("");

});

控制台中没有错误消息，但预期在浏览器中发生的消息不会执行。

在工作代码中，原始代码上还有另一个if语句：

$(document).ready(function(){
    $("form").submit(function() {
    var input = $("#command_line").val();
    console.log(input);


    if (input.indexOf("help") > -1) {
        if (input == "help") {
            $("#message_help").clone().insertBefore("#placeholder").fadeIn(1000);
        }
    }       
});

$("#command_line").val("");

});

为什么这需要在字符串'help'上使用indexOf的第二个if语句？我查了indexOf，并了解它的作用，但我会认为它们都做同样的事情？

Answer 1

在第一个例子中它实际上是一个拼写错误。在第二个例子中查看这一行：

$("#message_help").clone().insertBefore("#placeholder").fadeIn(1000);

你有insertBefore("#placeholder")，它会查找ID为＆＃34;占位符＆＃34;的元素。并在其前面插入clone。

在您的第一个示例中，您已跳过#，因此它正在寻找＆＃34;占位符＆＃34;的标记。（例如：<placeholder>） - 不存在。因此该元素将成功clone d，但将在 nothing 之后插入。

$('div')将返回页面上的所有<div>。
$('.pie')将返回页面上的所有元素，其中包含＆＃34;馅饼＆＃34;
$('#pie')将返回页面上ID为＆＃34; pie＆＃34;的元素。

Answer 2

它应该工作。这一行肯定存在问题：

    $("#message_help").clone().insertBefore("#placeholder").fadeIn(1000);

可能#placeholder或#message_help或两者都不存在。

JSFiddle

为什么这段代码需要第二个if语句？

2 个答案: