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

我认为这个CSS规则会为你带来魔力：

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

它会将具有'prod'属性的所有元素隐藏为除'new'以外的值。

Answer 2

这是未经测试的代码。

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），您可以将querySelectorAll参数中的new替换为变量本身：

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';
    }
}

根据URL变量过滤HTML内容

2 个答案:

HTML

的JavaScript