javascript - 根据表单字段的输入在按钮单击时添加两个 div 之一

Question

请允许我为我的 JavaScript 和 jQuery 技能道歉。我正在尝试根据表单的输入显示两个 div 之一。更具体地说，我在表单字段旁边有一个按钮，提示用户输入邮政编码以检查他们是否在我们的服务区域内。如果是，则显示一个带有文本的 div，“说明是的，您位于服务区”。如果它们不在服务区(!= 60614)，那么 div 会说“对不起......”这是我正在尝试但失败的代码: 网页:

<div class="large-3 small-6 large-centered small-centered columns"> 
    <input type="text" 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();
        }
    });
});

Answer 1

如果我理解正确的话，您的代码存在一些问题。第一个:严重拼写错误。在输入变量时检查它们!错误输入变量名称是一个常见的错误，您不会想为此而苦恼/浪费时间。

至于您的 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(){
    // 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;
    });
});

如果有任何不清楚的地方，请告诉我。我希望这可以帮助你。