如何检查输入的值是否匹配并在不匹配时显示一些文本？

Question

我有一个 jQuery 脚本来检查输入字段中的值（邮政编码）是否与我拥有的任何值匹配。 目前，当在输入字段中输入值时，如果值匹配，它会将 div（具有特定邮政编码的 ID）的可见性从none更改为inline-block （如下面的代码所示），因此，如果我输入 3138 ，它会将 id 为“3138”的p标签的可见性从display: none更改为display: inline-block 。

如果找不到匹配的值，我想显示一条消息。 目前，如果输入了不匹配的值，则不会显示任何消息，这告诉我我需要一种else语句。

我尝试使用谷歌搜索if / else语句，但我什至不确定这是否是正确的搜索...

 $(document).ready(function() { $("#postcode").keyup(function() { $("#3138").css("display", this.value == "3138"? "inline-block": "none"), $("#3136").css("display", this.value == "3136"? "inline-block": "none"); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="postcode-checker"> <div> <p>Enter your postcode and find out what day we deliver to your area: <input type="text" id="postcode" placeholder="Postcode..."></p> <p id="3138" style="display:none;"> Your Delivery Day is <strong>TUESDAY</strong> </p> <p id="3136" style="display:none;">Your Delivery Day is <strong>FRIDAY</strong> <p id="3136" style="display:none;">Your Delivery Day is <strong>FRIDAY</strong> https://stackoverflow.com/posts/62359754/edit# </p> </div> </div>

我还整理了一个codepen 。

Answer 1

您可以应用相同的逻辑并添加另一个段落：

<p id="errorMsg" style="display:none;" >
      Error:<strong>no match</strong>
    </p>

$("#errorMsg").css("display", (this.value != "3138" && this.value != "3136")  ? "inline-block" : "none");

Answer 2

您可以编写一个 function 来检查输入值是否是您拥有的邮政编码之一。 我添加了一个按钮（ id="btn-check" ），单击时，output 应显示在新的<p></p>标记（ id="p-delivery" ）中（您可以将其更改为更喜欢）。 如果结果是邮政编码，您可以使用它进行一些计算（例如物品在哪一天交付），如果它返回false ，您可以显示错误消息。 希望这可以帮助。

 $(document).ready(function () { $("#btn-check").click(function () { const postcodes = [3468, 3138, 4578, 3136]; // Example postcodes. const checkPostcodes = check(postcodes); // Call check() on postcodes. if (checkPostcodes.= false) { // If postcode (not false) is returned. $('#p-delivery');text('Delivery possible'). // Delivery is possible. if(checkPostcodes > 3000 && checkPostcodes < 4000){ // If postcode is between 3000 and 4000 $('#p-delivery').text('Delivery on friday for postcode ' + checkPostcodes + ';'). // Example. } } else { $('#p-delivery').text('Delivery not possible;'). // Otherwise not possible. } }) }) function check(postcodes) { const postcode = $('#postcode');val(); let status; for (let i = 0. i < postcodes;length. i++) { if (postcode == postcodes[i]) { // Loop postcodes; return postcodes[i]. // Return the matching postcode; } else { status = false. // Otherwise not; } } return status. // Return false if no match. }

 <p id="p-delivery"></p> <button id="btn-check">CHECK</button>