Javascript 对具有多个值的查询字符串参数使用indexof

我根据从另一个页面解析的查询字符串参数的内容显示隐藏的div，使用indexof检查值是否存在，然后显示该值对应的div

查询字符串：

index.html？q1=bag1、bag2、bag3

    var urlParams;
    (window.onpopstate = function () {
        var match,
            pl     = /\+/g,  // Regex for replacing addition symbol with a space
            search = /([^&=]+)=?([^&]*)/g,
            decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
            query  = window.location.search.substring(1);

        urlParams = {};
        while (match = search.exec(query))
           urlParams[decode(match[1])] = decode(match[2]);
    })();

然后使用

indexOf

根据值显示div：

    if ((urlParams["q1"]).indexOf("bag1") >= 0) {
        $(".content1").show();

    } else

    if ((urlParams["q1"]).indexOf("bag2") >= 0) {
        $(".content2").show();

    } else

    if ((urlParams["q1"]).indexOf("bag3") >= 0) {
        $(".content3").show();

    }

但是，它只显示第一个div，而不显示第二个或第三个div

---

我知道这将是一个简单的解决方案-有点卡住了。感谢您的帮助

您需要删除else子句，因为解释器将在第一个if为true后停止。所以你的代码应该是

    if ((urlParams["q1"]).indexOf("bag1") >= 0) {
        $(".content1").show();

    }

    if ((urlParams["q1"]).indexOf("bag2") >= 0) {
        $(".content2").show();

    }

    if ((urlParams["q1"]).indexOf("bag3") >= 0) {
        $(".content3").show();

    }

---

您需要删除else子句，因为在第一个if为true之后解释器将停止。所以你的代码应该是

    if ((urlParams["q1"]).indexOf("bag1") >= 0) {
        $(".content1").show();

    }

    if ((urlParams["q1"]).indexOf("bag2") >= 0) {
        $(".content2").show();

    }

    if ((urlParams["q1"]).indexOf("bag3") >= 0) {
        $(".content3").show();

    }

---

我建议使用

bag1

etc值作为ID，而不是类来标识单独的内容部分。如果一个类只标识一个元素，那么您就错了

然后，您应该使用相同的类标记所有内容元素（例如，

内容

），以便在运行

之前，可以对所有内容元素进行
隐藏（）
。对要保持可见的内容元素进行显示。如前所述，当您弹出状态时，任何已经可见的元素都将保持可见，即使它们本不应该是可见的

您的参数提取代码是可以的，但得到了
q1
值后，我会这样做：

var q1 = urlParams.q1;
if (q1 !== undefined) {
    $('.content').hide();    // show nothing
    q1.split(',').forEach(function(id) {
        $('#' + id).show();
    });
}

从而删除所有（损坏的）条件逻辑。
我建议使用
bag1
etc值作为标识，而不是类来标识单独的内容部分。如果一个类只标识一个元素，那么您就错了

然后，您应该使用相同的类标记所有内容元素（例如，
内容
），以便在运行
之前，可以对所有内容元素进行
隐藏（）
。对要保持可见的内容元素进行显示。如前所述，当您弹出状态时，任何已经可见的元素都将保持可见，即使它们本不应该是可见的

您的参数提取代码是可以的，但得到了
q1
值后，我会这样做：

var q1 = urlParams.q1;
if (q1 !== undefined) {
    $('.content').hide();    // show nothing
    q1.split(',').forEach(function(id) {
        $('#' + id).show();
    });
}

因此，删除了所有（损坏的）条件逻辑。
这可能重复的可能重复在技术上是正确的，但我不会在代码审查中接受它。因为它不必要地（不必要地）反复重复代码，而不是参数化操作。它也很容易出错（正如OP发现的那样），这在技术上是正确的，但我不会在代码审查中接受它。因为它不必要地（不必要地）重复代码，而不是参数化操作。它也容易出错（正如OP发现的那样）