如何一次向URL添加多个参数

Question

目前，如果您添加?dc=bananas或?dc=apples到网址的末尾，它会显示内容，但我如何才能使我可以做最多10？例如?dc=bananas+apples+oranges，它会显示添加的ID的所有内容吗？

另外，有没有可能设置它，这样我就不会对每个文件都有单独的div？这可以通过一个div检查URL中的参数来动态完成吗？

HTML：

<div id="default-content" class="dynamic-content">
  This is the default content
</div>
<!-- Dynamic Section 1 -->
<div id="apples" class="dynamic-content">
  I like apples
</div>
<!-- Dynamic Section 2 -->
<div id="oranges" class="dynamic-content">
  I like oranges
</div>
<!-- Dynamic Section 3 -->
<div id="bananas" class="dynamic-content">
  I like bananas
</div>

CSS：

.dynamic-content {
    display:none;
}

JS：

(function($){
    // Parse the URL parameter
    function getParameterByName(name, url) {
        if (!url) {
            url = location.href.split("?dc=").slice(-1)[0];
        } 
        return url;
    }
    // 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();
        }
    });
})(jQuery);

数据：

const myProducts = [{
  "productCode": "ABC",
  "productNumber": "1467-6281",
  "Name": "Example Item",
  "Price": "1.975",
  "Quantity": "4"
},
{
  "productCode": "HJK",
  "productNumber": "1111-9809",
  "Name": "Example Item 2",
  "Price": "2.975",
  "Quantity": "14"
},
{
  "productCode": "AOP",
  "productNumber": "8792-3890",
  "Name": "Example Item 3",
  "Price": "3.975",
  "Quantity": "8"
}]

Answer 1

可以有多个名称相同的参数：

...?dc=bananas&dc=apples&dc=oranges

它还允许您轻松地为每个对象创建一个div：

// Use the URLSearchParams interface to get an array of
// all values for the parameter you want to query.
const urlParams = new URLSearchParams(window.location.search);
let dynamicContent = urlParams.getAll('dc');

// For each value in the array, create and insert
// a new element.
for (let dc of dynamicContent)
{
    let newSection = document.createElement('div');
    newSection.id = dc;
    newSection.classList.add('dynamic-content');
    newSection.innerText = 'I like ' + dc;
    document.body.appendChild(newSection);
}

// Show or hide the default depending on if values exist.
if (dynamicContent.length) {
    document.querySelector('.default-content').style.display = 'none';
}
else {
    document.querySelector('.default-content').style.display = 'block';
}

在Internet Explorer之外，URLSearchParams接口受到广泛支持。

Answer 2

(function($) {

  // Parse the URL parameter
  function getParameterByName(name, url) {
    return url ?? location.href.split(`?${name}=`)[1];
  }

  $(document).ready(function() {
    const keys = getParameterByName('dc')?.split('+');
    let dynamicContent;

    // For each entry, check whether it correspondents to a div

    if (keys)
      keys.forEach(key => {
        if (key == 'apples')
          dynamicContent = $('#apples');
        else if (key == 'oranges')
          dynamicContent = $('#oranges');
        else if (key == 'bananas')
          dynamicContent = $('#bananas');
        if (dynamicContent)
          dynamicContent.show();
      });

    // If during the entire loop no element has been found, show the default one

    if (!dynamicContent)
      $('#default-content').show();
  })
})(jQuery);

Answer 3

侧重点：query-string库非常适合将JS对象转换为url查询字符串，并获取原始查询字符串以将其转换为JS对象。

https://www.npmjs.com/package/query-string