如何检查 URL 参数是否作为 JSON 键存在，然后显示其值

Question

我有一个名为 data.js 的文件，其中包含一堆项目的 JSON 数据。 目前，我的代码是 static 并且没有使用这个数据。

如何使 div 动态生成，以便当我在 JSON 数据文件中有很多不同的项目时，这仍然有效？ 这样，如果我从 go 到 URL 并从项目的产品代码中键入一堆参数，它们都会显示出来。 示例： ?qs=ABC+HJK

代码：

<!DOCTYPE html>
<html>
<head>
  <title></title>

  <style type="text/css">
    .dynamic-content {
      display:none;
    }
  </style>
</head>
<body>

  <!-- Default Dynamic Section -->
  <div id="default-content" class="dynamic-content">
    Default content
  </div>
  <!-- Dynamic Section 1 -->
  <div id="apples" class="dynamic-content">
    Apples
  </div>
  <!-- Dynamic Section 2 -->
  <div id="oranges" class="dynamic-content">
    Oranges
  </div>
  <!-- Dynamic Section 3 -->
  <div id="bananas" class="dynamic-content">
    Bananas
  </div>

  <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
  
  <script type="text/javascript">
    (function($) {

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

  $(document).ready(function() {
    const keys = getParameterByName('qs')?.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 no element is found, show the default one
    if (!dynamicContent)
      $('#default-content').show();
  })
})(jQuery);
</script>
</body>
</html>

Answer 1

我会用香草js尝试这样的事情

示例 .js 文件

objects.js

data = [
    {
        "productNumber":"123",
        "name":"Ex Item 1"
    },
    {
        "productNumber":"142",
        "name":"Ex Item 2"
    },
    {
        "productNumber":"153",
        "name":"Ex Item 3"
    },
    {
        "productNumber":"249",
        "name":"Ex Item 4"
    }
]

function makeDiv(prodNum, prodName){
    exampleDiv = `
            <div>
                <h3>${prodNum}</h3>
                <p>${prodName}</p>
            </div>
    `   
    return exampleDiv
}

const mainDiv = document.querySelector('#mainDiv')

data.forEach(element => {
    productDiv = document.createElement('div');
    productDiv.innerHTML = makeDiv(element.productNumber, element.name)
    mainDiv.appendChild(productDiv)
});

html文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="mainDiv"></div>

    <script src="objects.js"></script>
</body>
</html>

然后您可以为生成的元素提供类和ID，您可以在html上放置一个if来检查数据是否为空，并使用默认内容或在js文件中设置默认值

如何检查 URL 参数是否作为 JSON 键存在，然后显示其值

问题描述

1 个解决方案

解决方案1
1 2021-01-13 20:46:45

如何检查 URL 参数是否作为 JSON 键存在，然后显示其值

问题描述

1 个解决方案

解决方案1 1 2021-01-13 20:46:45

解决方案1
1 2021-01-13 20:46:45