Question

我有以下用于运行此语句的JS： “如果当前页面的网址包含STRING1，请切换ID的复选框：TOPIC1”

$(document).ready(function() {
  if (window.location.href.indexOf("STRING1") > -1) {
    document.getElementById("TOPIC1").checked = true;
  }
});

我在列表中有15个主题，我希望优化代码，以便为每个不同的主题替换STRING1和TOPIC1。

有人建议我使用javascript switch语句，但我无法弄清楚如何做到这一点。这是我提出的转换声明......

$(document).ready(function () {
  switch (window.location.href.indexOf("free") > -1){
    case "STRING1":
      document.getElementById("TOPIC1").checked = true;
      break;
    case "STRING2":
      document.getElementById("TOPIC2").checked = true;
      break;
    case "STRING3":
      document.getElementById("TOPIC3").checked = true;
      break;
    case "STRING4":
      document.getElementById("TOPIC4").checked = true;
      break;
  }
});

不幸的是，⬆︎不起作用。任何帮助都会非常感激！

这是fiddle

Answer 1

您的问题是switch或true false。

我会避免switch - 它超过必要的时间，并且当您忘记break时很容易造成问题。如果可以，请改为使用对象查找：

const stringsToIds = [
  ['STRING1', 'TOPIC1'],
  ['STRING2', 'TOPIC2'],
  ['STRING3', 'TOPIC3'],
];
const { href } = window.location;
const match = stringsToIds.find(([str]) => href.includes(str));
if (match) document.getElementById(match[1]).checked = true;

这样，您的代码非常简洁，易于理解。

Answer 2

你可以这样做：

$(document).ready(function () {
     var pairs = [
         { match: "STRING1", check: "TOPIC1" },
         { match: "STRING2", check: "TOPIC2" },
         { match: "STRING3", check: "TOPIC3" }
    ];

    var foundPair = pairs.find(function (pair) {
        return window.location.href.indexOf(pair.match) > -1;
    });

    if (foundPair) {
        document.getElementById(foundPair.check).checked = true;
    }
});

请注意，IE中默认不支持Array#find，但可以使用polyfill添加Array_1.printArray(intarray);。

Answer 3

为什么不使用对象。像这样的东西，

@Html.LabelFor(m => m.SelectedBuildings)
@Html.ListBoxFor(m => m.SelectedBuildings, Model.AllBuildings, new { @class="dropdown-menu" })
....
@Html.ListBoxFor(m => m.SelectedServices, Model.AllServices, new { @class="dropdown-menu" })
....

如何简化多个Javascript IF语句？

3 个答案: