Question

下面的代码根据URL参数显示和隐藏div。但是，URL参数将显示多个项目，而不是一个（苹果，橘子）。使用当前的代码不起作用。它什么也不会显示。相反，我需要它显示它是否包含“ apples”，然后显示apple div。如果包含“橙色”，则还显示橙色。这是我的事，我需要一些帮助来配置它。预先感谢您的帮助！

我正在使用的脚本如下。就像我说的那样，我将使用的URL参数将是“苹果，橙子，香蕉”的变体

<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

现代方式：

新网址（“ http://example.com/aa/bb/”）

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

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

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

除了浏览器之外，v7以后的Node.js也可以通过require（'url'）。URL来使用此API。

您还可以使用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')，这将为您提供一个数组：{{1} }

现在，当您在["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的分配可以组合为在线内容，我可以编辑为在时间允许的情况下显示一些改进。

编辑

我删除了逗号-您的第一条评论用逗号隔开，第二条评论只是换行符，但是我把逗号留在了。

正如@Elian的答案所示，如果您的fruits值完全与您没有的id=值匹配不必费心dc测试，您可以直接在if()的选择器中使用dc值-这是我所暗示的改进之一。

这是经过改进的代码，再加上步骤组合并消除了中间变量。它还使用Javascript ES6 arrow function代替.show()的{{1}}参数：

function(f)

forEach

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();
    }
});

临时（将是注释，但需要设置格式）

转到运行JavaScript的页面-包含查询字符串.fruit { display: none; }的页面...到那里，但是您通常会通过执行所需的操作到达那里jotform。
在该页面上，打开浏览器开发人员工具，然后在浏览器控制台中键入以下内容：

<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>

现在您有了一个名为?dc=apples%0Aoranges的数组...只需在控制台中输入该变量名，它便会显示该数组的内容，该内容将是参数值中所有字符的数值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

您应该获得一个类似于以下内容的显示：

dc=

在此处使用反引号将其发布为注释，以使其成为代码。
（此输出为dc === vals时的输出）
这将显示字符串中的 actual 个字符，以及拆分的内容。

根据URL参数显示/隐藏div

3 个答案: