当我单击主组/按钮阵列中的一个按钮时如何显示一组按钮

Question

当我单击当前组中的一个按钮时，我想显示一组新按钮。 我无法实现onclick function 并且我不想在每次点击时引入新的 HTML 页面。 当我单击一个类别按钮时，我想显示一组新按钮。

这是代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body style="display:grid">
<p id="demo"></p>
<p id="demo1"></p>

<script type="text/javascript">
  "use strict"
  fetch("https://storage.googleapis.com/android-tv/android_tv_videos_new.json")
    .then(function(resp){
      return resp.json();
    })
    .then(function(data){
      let data2= data.googlevideos
      let category_names = []
      let video_list0 = []
      for(let i=0; i<data2.length; i++){
        category_names.push(data2[i].category);
        //video_list0.push(data2[i].videos[j])
            for(let j=0;j<data2[i].videos.length;j++){
            video_list0.push(data2[i].videos[j])
          }         
        }
        const filterstudio = (array , studios) => array.filter(task => task.studio===studios);
                const category1videos = filterstudio(video_list0,"Google+");        
        
        category_names.forEach(button);        
        function button(item) {
          document.getElementById("demo").innerHTML += "<button style='display: grid; width: 100px'>" + item + "</button>";
          }
        category1videos.forEach(myFunction);        
        function myFunction(item) {
            document.getElementById("demo1").innerHTML += "<button style='display: grid; width: 100px'><a href='"+item.sources+"'>" + item.title + "</button>";
        }
        

    })
</script>
</body>
</html>

在上面的代码中，创建了当前 category_names 按钮集，然后也创建了 category1 视频按钮集。 当我单击类别 1 和同一 HTML 页面时，我想显示类别 1 视频按钮。 我尝试将onclick= style.display设为 none 并调用 category1videos.forEach(myFunction)，但它不起作用。 任何帮助将不胜感激。

代码 Output：

Answer 1

像这样的东西？

 fetch("https://storage.googleapis.com/android-tv/android_tv_videos_new.json").then(function (resp) { return resp.json(); }).then(function (data) { let data2 = data.googlevideos let category_names = [] let video_list0 = [] let container = document.getElementById("demo") container.innerHTML = '' for (let i = 0; i < data2.length; i++) { const item = data2[i] const category = item.category const categoryCode = category.replace("'","") container.innerHTML += `<button onclick="showVideos('${categoryCode}')" style="display: grid; width: 100px">${category}</button>` const videos = data2[i].videos let videoContainer = `<div class="videos-container" style="display:none" data-target="${categoryCode}">` for (let j = 0; j < videos.length; j++) { const video = videos[j] videoContainer += `<button><a href="${video.sources}">${video.title}</button>` if (j === videos.length - 1) { videoContainer += '</div>' container.innerHTML += videoContainer } } } }) function showVideos(target) { const el = document.querySelector(`[data-target="${target}"]`); const isHidden = el.style.display === "none" el.style.display = isHidden? 'block': 'none' }

 .videos-container{ padding:.5em; margin:.5em; border:1px solid #000; border-radius:15px; }.videos-container button{ display:inline-block; margin:.5em; padding:.2em; } a{ text-decoration:none; color:#000; }

 <p id="demo"></p>

当我单击主组/按钮阵列中的一个按钮时如何显示一组按钮

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-05-24 09:48:27

当我单击主组/按钮阵列中的一个按钮时如何显示一组按钮

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-05-24 09:48:27

解决方案1
2 已采纳 2020-05-24 09:48:27