根据 URL 参数显示/隐藏 div

Question

下面的代码显示和隐藏基于 URL 参数的 div。但是，URL 参数将显示多个项目，而不仅仅是一个（苹果、橙子）。使用不起作用的当前代码。它不会显示任何内容。相反，我需要它显示它是否包含“苹果”，然后显示苹果 div。如果它包括“橙子”，也显示橙子。这个超出了我的范围，我需要一些帮助来配置它。提前感谢您的帮助！

我使用的脚本如下。就像我说的，我将使用的 URL 参数将是“apples, oranges,bananas”的变体

<script type="text/javascript">
    // Parse the URL parameter
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    // Give the parameter a variable name
    var dynamicContent = getParameterByName('dc');

     $(document).ready(function() {

        // Check if the URL parameter is apples
        if (dynamicContent == 'apples') {
            $('#apples').show();
        } 
        // Check if the URL parameter is oranges
        else if (dynamicContent == 'oranges') {
            $('#oranges').show();
        } 
        // Check if the URL parameter is bananas
        else if (dynamicContent == 'bananas') {
            $('#bananas').show();
        } 
        // Check if the URL parmeter is empty or not defined, display default content
        else {
            $('#default-content').show();
        }
    });
</script>

Answer 1

1. 现代方式：

   新网址("http://example.com/aa/bb/")

返回一个具有主机名和路径名以及其他一些属性的对象。

第一个参数是相对或绝对 URL；如果它是相对的，那么您需要指定第二个参数（基本 URL）。例如，对于相对于当前页面的 URL：

new URL("/aa/bb/", location)

除了浏览器，这个 API 在 Node.js 从 v7 开始也可用，通过 require('url').URL

1. 您还可以使用 Locutus 项目（原 php.js）中的 parse_url() 函数。

代码：

parse_url('http://username:password@hostname/path?arg=value#anchor');

结果：

{
  scheme: 'http',
  host: 'hostname',
  user: 'username',
  pass: 'password',
  path: '/path',
  query: 'arg=value',
  fragment: 'anchor'
}

一旦正确解析，它就应该按照您使用它的方式工作。 希望这会有所帮助..

Answer 2

保持代码的第一部分相同（直到 document.ready 行）以下是如何更改显示每个参数的 div 的部分：

$(document).ready(function() {
  if (dynamicContent) {
    dynamicContent.split('\n').forEach(function(param) {
      $('#' + param).show();
    });
  } else {
    $('#default-content').show();
  }
});

使用example.com/?dc=apples%0Aoranges 之类的网址，这将显示 id 为 #apples 的 div 和 id 为 #oranges 的 div

Answer 3

这里的关键是如何处理 dc 参数中的多个项目。

首先，正如@Shlomo 的回答所示，有一种更好的方法来获取参数值，即使用URL 对象而不是RegExp。这会将您的 function getParameterByName(name, url) 方法更改为：

function getParameterByName(name, url) {
        let u = new URL(url);
        return u.searchParams.get('dc');
}
// try a call
let urlString = 'https://example.com?dc=apples%0Aoranges';
console.log( getParameterByName('dc', urlString) );

这非常简单，您可以取消该方法并内联它。
它给你的是字符串apples(linefeed)oranges == apples\u000Aoranges
所以你会想要拆分该字符串以获得你想要的组件：apples 和 oranges — string.split('\n') 这会给你一个数组：["apples", "oranges"]

现在，当您在 $(document).ready(...) 中执行操作时，您将需要检查数组中的每个元素。

let urlString = 'https://example.com?dc=apples%0Aoranges';
$(document).ready(function() {
    const url = new URL(urlString)
    const dc = url.searchParams.get('dc')
    console.log(dc);
    const fruits = dc.split('\n');
    console.log(fruits);
    
    fruits.forEach(function(f) {
        // Check if the URL parameter is apples
        if (f == 'apples') {
            $('#apples').show();
        } 
        // Check if the URL parameter is oranges
        else if (f == 'oranges') {
            $('#oranges').show();
        } 
        // Check if the URL parameter is bananas
        else if (f == 'bananas') {
            $('#bananas').show();
        } 
        // Check if the URL parameter is empty or not defined, display default content
        else {
            $('#default-content').show();
        }
    });
});

.fruit {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fruit" id="default-content">No fruits have been chosen</div>
<div class="fruit" id="apples">apples</div>
<div class="fruit" id="oranges">oranges</div>
<div class="fruit" id="bananas">bananas</div>

可以对此进行更多改进，例如 url、dc 和 fruits 分配可以组合为联机，我可以编辑以显示一些改进时间允许。

---

编辑

我已经删除了逗号 - 您的第一条评论有逗号空格，第二条评论只是一个换行符，但我把逗号留在里面了。

正如@Elian 的回答所表明的，如果您的 id= 值完全与您不必费心的 dc 值匹配通过if() 测试，您可以直接在.show() 的选择器中使用dc 值——这是我暗示的改进之一。

这里的代码进行了改进，并结合了这些步骤并消除了中间变量。它还使用 Javascript ES6 arrow function 代替 forEach 的 function(f) 参数：

let urlString = 'https://example.com?dc=bananas%0Aoranges';
$(document).ready(function() {
    try {
        const fruits = new URL(urlString)
                       .searchParams.get('dc')
                       .split('\n');
        console.log(fruits);
        
        fruits.forEach(f => $('#'+f).show());
    }
    // If there is no `dc` value, the .split above will cause an error.
    // Catch it and show the default content.
    catch (err) {
        $('#default-content').show();
    }
});

.fruit {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fruit" id="default-content">No fruits have been chosen</div>
<div class="fruit" id="apples">apples</div>
<div class="fruit" id="oranges">oranges</div>
<div class="fruit" id="bananas">bananas</div>

---

临时（可能是评论，但需要格式化）

转到您的 javascript 正在运行的页面 - 具有查询字符串 ?dc=apples%0Aoranges 的页面 ... 转到那里，但是您通常会到达那里，通过在 jotform 中执行您需要的任何操作。
在该页面上打开您的浏览器开发者工具并在您的浏览器控制台中输入以下内容：

let u = new URL(window.location.href);
let args = u.searchParams.get('dc');
let vals = [];
for (let i=0; i<args.length; i++) {
    vals.push(args.charCodeAt(i));
}

现在您有一个名为vals 的数组...只需在控制台中键入该变量名称，它应该会显示数组的内容，这将是@987654354 参数值中所有字符的数值@

vals

你应该得到一个看起来像这样的显示：

(14) [97, 112, 112, 108, 101, 115, 10, 111, 114, 97, 110, 103, 101, 115]  #in Chrome
-or-
Array(14) [ 97, 112, 112, 108, 101, 115, 10, 111, 114, 97, … ] #in Firefox

在此处使用反引号将其发布在评论中以使其成为代码。
（这个输出是当 dc === 'apples\u000Aoranges'）
这将显示字符串中的 实际 个字符，以及要拆分的内容。