html - 根据 URL 变量过滤 HTML 内容

Question

我正在寻找一种可以基于 URL 中的变量隐藏特定 HTML 内容的方法。

例如，我传递一个变量：index.html?app=new

我有各种具有 prod 属性的图像和其他内容，并且只想显示那些具有“新”prod 值的内容。

<img prod="new" class="image" src="../images/screen.png" height="300" width="600"/>

我使用以下方法来获取 url 变量：

<script>  
  function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
    function(m,key,value) {
    vars[key] = value;
    });
    return vars;
  }
</script>

我的问题是从这里去哪里

Answer 1

这是未经测试的代码。

HTML

<img data-prod="new" class="image" src="../images/screen.png" height="300" width="600" />

JavaScript

<script>  
    (function(){
    'use strict';

    var getUrlVars = function() {
        var vars = {};

        window.location.href.replace(
            /[?&]+([^=&]+)=([^&]*)/gi,
            function(m,key,value) {
                vars[key] = value;
            }
        );
        return vars;
    };

    if(typeof getUrlVars.app === 'string' && getUrlVars.app === 'new') {
        var c = document.querySelectorAll('[data-prod="new"]'), i;
        for(i = 0; i < c.length; i+=1) {
            c[i].style.display = 'none';
        }
    }
    })();
</script>

在一般情况下（即 app=new，app=whatever），您可以new将 querySelectorAll 参数替换为变量本身：

if(typeof getUrlVars.app === 'string') {
    var c = document.querySelectorAll('[data-prod="' + getUrlVars.app + '"]'), i;
    for(i = 0; i < c.length; i+=1) {
        c[i].style.display = 'none';
    }
}

Answer 2

我认为这个 CSS 规则会为你创造奇迹：

[prod]:not([prod=new]) { display:none; }

它将隐藏所有具有 'prod' 属性且值不是 'new' 的元素。