Javascript 根据表单字段的输入，在单击按钮时添加两个div中的一个

让我为我的NoobJavaScript和jQuery技能道歉。我正在尝试根据表单的输入显示两个div中的一个。更具体地说，我在表单字段旁边有一个按钮，提示用户输入他们的邮政编码，以检查他们是否在我们的服务区。如果他们是，则填写一个div，文字为“表示您在服务区内”。如果他们不在服务区（！=60614），则会有一个div说“对不起…”这是我正在尝试的代码，但失败了： Html:

检查一下你的拉链

JavaScript:

$(function(){
    var NewContent=' <div class="zipResultsNegative"><p>Sorry we are not doing pickups in your area yet, but we will be soon. Please sign up, so when we get to your area you will be ready yo go.</p></div>'

    var OtherConent= '<div class="zipResultsPositive"><p>We are in you area, so sign up and give us a whirl!</p></div>'

    $(".checkZipButton").click(function(){
        if (NewContent != '60614') {
            $("#checkZipButton").after(NewContent);
            NewContent = '';
        } else OtherContent ==='60614'{
            $("#checkZipButton").after(OtherContnent);
            OtherContent = '';
        } else{
            $('#checkZipButton').next().toggle();
        }
    });
});

$(function(){
    // Make sure to always add ';' at the end of your commands in JavaScript.
    // It is not required, but is Good Practice and helps with code validation/minifying.
    var NewContent = '<div class="zipResultsNegative"><p>Sorry we are not doing pickups in your area yet, but we will be soon. Please sign up, so when we get to your area you will be ready yo go.</p></div>';

    var OtherContent = '<div class="zipResultsPositive"><p>We are in you area, so sign up and give us a whirl!</p></div>';

    $("#checkZipButton").click(function(){

        // Whenever .checkZipButton is clicked, you need to know the value
        // of the ZipCode the user provided.
        var zipcode = $('#inputZipcode').val();

        // Maybe you'll also desire to "clean" it up, as the user may type
        // characters other than numbers
        zipcode = zipcode.replace(/[^0-9]/g, '');

        if (zipcode != '60614') {
            $("#checkZipButton").after(NewContent);

            // This is not needed
            // NewContent = '';
        } else {
            $("#checkZipButton").after(OtherContent);

            // Also not needed
            // OtherContent = '';
        }
        // ...and I don't know where you tried to get with this:
        //} else{
        //  $('#checkZipButton').next().toggle();
        //}

        return false;
    });
});

$（函数（）{
var NewContent='很抱歉，我们还没有在您所在的地区进行接送，但我们很快就会进行。请注册，这样当我们到达您所在的地区时，您就可以开始了。
'
var OtherConent='我们在您的区域，所以请注册并让我们体验一下！
'
$（“.checkZipButton”）。单击（函数（）{
如果（NewContent！=“60614”）{
$（“#checkZipButton”）。在（NewContent）之后；
NewContent=''；
}其他内容==='60614'{
美元（“#checkZipButton”）。之后（其他内容）；
其他内容=“”；
}否则{
$（'#checkZipButton'）.next（）.toggle（）；
}
});
});

如果我理解正确，您的代码有一些问题。首先：strong拼写错误。在键入变量时检查它们！输入错误的变量名是一个常见的错误，您不想为此而挣扎/浪费时间

至于你的JavaScript检查，你几乎做到了。您只是使用了错误的来源进行比较。看看这个：

<div class="large-3 small-6 large-centered small-centered columns"> 
    <!-- Added an ID attribute to the input -->
    <input type="text" id="inputZipcode" placeholder="Zip Code" />
    <a id="checkZipButton" class="button">Check your zip</a>
    <!--<div class="zipResultsNegative"><p>Sorry we are not doing pickups in your area yet, but we will be soon. Please sign up, so when we get to your area you will be ready yo go.</p></div>
     <div class="zipResultsPositive"><p>We are in you area, so sign up and give us a whirl!</p></div>-->
</div>

检查一下你的拉链

JavaScript:

$(function(){
    var NewContent=' <div class="zipResultsNegative"><p>Sorry we are not doing pickups in your area yet, but we will be soon. Please sign up, so when we get to your area you will be ready yo go.</p></div>'

    var OtherConent= '<div class="zipResultsPositive"><p>We are in you area, so sign up and give us a whirl!</p></div>'

    $(".checkZipButton").click(function(){
        if (NewContent != '60614') {
            $("#checkZipButton").after(NewContent);
            NewContent = '';
        } else OtherContent ==='60614'{
            $("#checkZipButton").after(OtherContnent);
            OtherContent = '';
        } else{
            $('#checkZipButton').next().toggle();
        }
    });
});

$(function(){
    // Make sure to always add ';' at the end of your commands in JavaScript.
    // It is not required, but is Good Practice and helps with code validation/minifying.
    var NewContent = '<div class="zipResultsNegative"><p>Sorry we are not doing pickups in your area yet, but we will be soon. Please sign up, so when we get to your area you will be ready yo go.</p></div>';

    var OtherContent = '<div class="zipResultsPositive"><p>We are in you area, so sign up and give us a whirl!</p></div>';

    $("#checkZipButton").click(function(){

        // Whenever .checkZipButton is clicked, you need to know the value
        // of the ZipCode the user provided.
        var zipcode = $('#inputZipcode').val();

        // Maybe you'll also desire to "clean" it up, as the user may type
        // characters other than numbers
        zipcode = zipcode.replace(/[^0-9]/g, '');

        if (zipcode != '60614') {
            $("#checkZipButton").after(NewContent);

            // This is not needed
            // NewContent = '';
        } else {
            $("#checkZipButton").after(OtherContent);

            // Also not needed
            // OtherContent = '';
        }
        // ...and I don't know where you tried to get with this:
        //} else{
        //  $('#checkZipButton').next().toggle();
        //}

        return false;
    });
});

$（函数（）{
//确保始终在JavaScript中的命令末尾添加“；”。
//这不是必需的，但它是良好的实践，有助于代码验证/缩小。
var NewContent='很抱歉，我们还没有在您所在的地区进行接送，但我们很快就会进行。请注册，这样当我们到达您所在的地区时，您就可以开始了。
'；
var OtherContent='我们在您的区域，所以请注册并让我们体验一下！
；
$（“#检查ZipButton”）。单击（函数（）{
//无论何时单击.checkZipButton，您都需要知道该值
//用户提供的ZipCode的。
var zipcode=$（'#inputZipcode'）.val（）；
//也许你也希望“清理”它，就像用户可能键入的那样
//数字以外的字符
zipcode=zipcode.replace（/[^0-9]/g'）；
if（zipcode！=“60614”）{
$（“#checkZipButton”）。在（NewContent）之后；
//这是不必要的
//NewContent=''；
}否则{
$（“#checkZipButton”）。在（其他内容）之后；
//也不需要
//其他内容=“”；
}
//…我不知道你想从哪里得到这些：
//}否则{
//$（'#checkZipButton'）.next（）.toggle（）；
//}
返回false；
});
});

如果有什么不清楚的地方，请告诉我。我希望这能对你有所帮助。

这个怎么样？

$（函数（）{
var NewContent='很抱歉，我们还没有在您所在的地区进行接送，但我们很快就会进行。请注册，这样当我们到达您所在的地区时，您就可以开始了。
'
var OtherContent='我们在您的区域，所以请注册并让我们体验一下！
'
$（“#检查ZipButton”）。单击（函数（）{
if（$（“#zipcode”）.val（）！=“60614”）{
$（“.zipResultsPositive”）.remove（）；
$（“.zipResultsNegative”）.remove（）；
$（“#checkZipButton”）。在（NewContent）之后；
}else if（$（“#zipcode”）.val（）=='60614'）{
$（“.zipResultsPositive”）.remove（）；
$（“.zipResultsNegative”）.remove（）；
$（“#checkZipButton”）。在（其他内容）之后；
}否则{
$（'#checkZipButton'）.next（）.toggle（）；
}
});
});

如果某些东西只能存在一次，不要使用类。使用身份证

您正在检查要添加“if（NewContent）”的div上是否设置了值

您的else缺少括号，并且再次检查错误的对象

您可能应该使用按钮来代替

---

首先：检查你的拼写。在快速查看中，我可以看到

OtherConent

、

OtherConent

和

OtherContent

，它们都指向同一个变量。此外，拼写错误不是问题的根源。。我会发布一个答案来修复你的代码，让它正常工作。谢谢@mathielo。。。拼写仍然让我很遗憾，但谢谢你的帮助。非常感谢。我来晚了：（，用这个它检查有效的zipcodes，我没有t@Puzzle84在和中有一些重要的提示，用户2209914应该注意！很好地指出；）我们的两个答案大致相同=p