Question

我为用户创建了一个邮政编码查找。当他们输入他们的邮政编码时，如果他们的邮政编码在列表中，那么它将报告他们在我们的服务区域之一。如果他们的邮政编码不在列表中，那么它将报告该服务在他们的区域中不可用。

我使用的示例代码运行良好，但我的挑战是我只使用3个邮政编码，但我需要我的列表包含100个邮政编码。理想情况下，我希望引用一个包含这些邮政编码列表的外部文件，但如果没有，我可以在脚本中列出所有邮政编码。我愿意接受建议。我目前正在使用开关。这样做的最佳方式是什么？

提前谢谢。

这是我的代码：

<html>
<head>
<script>
function myFunction() {
    var zipcode = document.getElementById("myZipCode").value;
    var message;

  switch(zipcode) {
    case "85142":
    case "99999":
  case "88888":
        message = "Service is available for your location.";
        break;
    default:
        message = "Sorry your location is not available for service.<br />Click here to be notified once your location becomes available.";
  }

    document.getElementById("response").innerHTML = message;
}
</script>
</head>
<body>  
<p>Enter your 5-digit Zip Code:</p>
<input id="myZipCode" type="text" maxlength="5">
<button onclick="myFunction()">Lookup</button>
<br />
<p id="response"></p>
</body>
</html>

我的代码也可在以下位置找到：https://jsfiddle.net/aplanet/7ttb19h5/11/

Answer 1

您可以使用Set

const zips = new Set(["85142", "99999", "88888"]);

console.log(zips.has("85142"));

Answer 2

您的目标是什么样的浏览器支持？如果您需要支持IE9（Set需要IE11，并且.includes根本无法在IE上运行），使用indexOf将会很好用：

window.coveredZips = ['77777', '88888', '99999'];
document.addEventListener("DOMContentLoaded", function() {
    var lookupButton = document.querySelector(".lookup-zip");
    var response = document.getElementById("response");
    var checkZipcodes = function() {
        var zipcode = document.getElementById("myZipCode").value;
        var message;

        if (window.coveredZips.indexOf(zipcode) > -1) {
            message = "Service is available for your location.";
        } else {
            message =
                "Sorry your location is not available for service.<br />Click here to be notified once your location becomes available.";
        }

        response.innerHTML = message;
    };
    lookupButton.addEventListener("click", function() {
        checkZipcodes();
    });
});

<html>

<head>
</head>

<body>

    <p>Enter your 5-digit Zip Code:</p>

    <input id="myZipCode" type="text" maxlength="5">

    <button class="lookup-zip">Lookup</button>
    <br />
    <p id="response"></p>

    <script src="coveredZips.js"></script>
    <script src="index.js"></script>
</body>

</html>

如果您查看REPL： https://repl.it/@ryanpcmcquen/CheerfulWelllitDeveloper

您可以看到邮政编码可以存放在自己的文件中。

创建一个JavaScript查找，将用户输入与大量项目进行比较

2 个答案: