Question

我有一个可以根据URL值隐藏/显示内容的工作代码。例如：

www.domain.com/?filter_brands=gucci

将显示“gucci”的内容，其余内容将保持隐藏状态。

但是，如果网址获得额外的字段/值，则会停止工作。例如：

www.domain.com/?filter_brands=gucci&query_type_brands=or

不起作用..我在javascript中更改了什么，因此它会读取第一个filter_brands值并忽略其余的..？非常感谢你们！

这是javascript：

    $(document).ready(function() {
    var brands = 'gucci';
    var url = window.location.search;
    brands = url.match(/filter_brands=(.*)/)[1];
    showDiv(brands);
});
function showDiv(brands) {
    $('.boxes').hide();
    $('#' + brands).show();
}

这是html：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div class="boxes" id="gucci">Gucci is awesome!</div>
    <div class="boxes" id="versace">Versace is da bomb!</div>
    <div class="boxes" id="dolce-gabanna">Dolce & Gabanna is cool!</div>
  </body>
</html>

以下是关于小提琴http://jsfiddle.net/s7V26/

的完整代码

它不会隐藏小提琴上的内容，因为您需要使用？filter_brands = gucci加载网址但代码有效..

Answer 1

我认为你需要一个更好的函数来获取查询字符串

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

//基于这个答案 How can I get query string values in JavaScript?

showDiv(getParameterByName("filter_brands"));

Answer 2

这是绝对最简单的方法，因为你只使用一个url变量，它不必使用复杂的函数来获取它，你可以使用split函数来完成它。如果名称中有转义字符但您没有任何字符，则此操作无效，因此它不应成为您的代码的问题。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  </head>
  <body>
    <div class="boxes" id="gucci">Gucci is awesome!</div>
    <div class="boxes" id="versace">Versace is da bomb!</div>
    <div class="boxes" id="dolce-gabanna">Dolce & Gabanna is cool!</div>
  </body>
</html>
<script>

  $(document).ready(function(){

    function showDiv(brands) {
        $('.boxes').hide();
        $('#' + brands).show();
    }

    // var brands = 'gucci';
    var url = window.location.search;
    var key = url.split("=")[0];
    if(key == "brands") // if you want to check if they used brands as urlvar
        brands = url.split("=")[1];
    showDiv(brands);

  })

</script>

split会将urlvar转换为数组。例如？brands = gucci将转换为[“品牌”，“gucci”] 如果你发送的变量多一个，但它变得更复杂，你需要像其他人发布的一些答案一样使用函数调用。像这样

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  </head>
  <body>
    <div class="boxes" id="gucci">Gucci is awesome!</div>
    <div class="boxes" id="versace">Versace is da bomb!</div>
    <div class="boxes" id="dolce-gabanna">Dolce & Gabanna is cool!</div>
  </body>
</html>
<script>

  $(document).ready(function(){

    function showDiv(brands) {
        $('.boxes').hide();
        $('#' + brands).show();
    }

    function getParameterByName(name) {
      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
      var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
          results = regex.exec(location.search);
      return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    // var brands = 'gucci';
    var url = window.location.search;
    var brands = getParameterByName("brands");
    showDiv(brands);

  })

</script>

如何根据URL值隐藏div内容 - 多个字段

2 个答案: