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

Stack Overflow用户

提问于 2021-01-14 04:15:47

回答 1查看 55关注 0票数 1

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

如何动态生成div，以便在JSON数据文件中有许多不同的项时仍然有效？这样，如果我转到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>

html

javascript

回答 1

Stack Overflow用户

发布于 2021-01-14 04:46:46

我会用香草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>

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65709144

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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