Question

让我为我的noob javascript和jQuery技能道歉。我正在尝试根据表单的输入显示两个div中的一个。更具体地说，我在表单字段旁边有一个按钮，提示用户输入他们的邮政编码以检查他们是否在我们的服务区域。如果他们是，一个文本的div“说你是在服务区”。如果他们不在服务区（！= 60614），那么一个div说“抱歉....”这是我正在尝试和失败的代码： HTML：

<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;
    });
});

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

Answer 2

这个怎么样？ http://jsfiddle.net/Wzja4/

<div class="large-3 small-6 large-centered small-centered columns"> 
    <input type="text" id="zipcode" placeholder="Zip Code" />
    <a id="checkZipButton" class="button" href="#">Check your zip</a>
</div>

$(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 OtherContent = '<div class="zipResultsPositive"><p>We are in you area, so sign up and give us a whirl!</p></div>'

    $("#checkZipButton").click(function () {
        if ($("#zipcode").val() != '60614') {
            $(".zipResultsPositive").remove();
            $(".zipResultsNegative").remove();
            $("#checkZipButton").after(NewContent);
        } else if ($("#zipcode").val() === '60614') {
            $(".zipResultsPositive").remove();
            $(".zipResultsNegative").remove();
            $("#checkZipButton").after(OtherContent);
        } else {
            $('#checkZipButton').next().toggle();
        }
    });
});

如果某些内容只能存在一次，则不要使用类。使用id's
如果在你要添加“div（NewContent）”
的div上设置了值，则检查是否正确
你的其他人缺少括号，并再次检查错误的对象
您应该使用按钮代替。

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

2 个答案: