将JSON附加到包含相关信息的HTML容器

Question

我正在尝试遍历JSON文件并将信息附加到相关容器。这有两个层次，第一层和第二层。第一级有手柄类型（Victorian，Chrissi，Garda），第二级有完成（Brass，Chrome，Satin Nickel）。我的问题是，当你进入第二级时，我很难将选项分组到相关的句柄类型。我希望这是有道理的。

因此，如果您点击“维多利亚时代”，那么它应该只加载“维多利亚时代”完成选项的下一个菜单。我正在使用data-trigger / data-target属性将菜单链接在一起。

以下是它应该如何运作：

Screenshot for Menu 1 Screenshot for Menu 2

单击门把手图标，它会加载第一个菜单，其中包含以下选项： -

标题=选择一个家庭

选项=维多利亚时代 - 克里斯 - 加尔达。

然后点击“维多利亚时代”，它会为您提供维多利亚时代的完成选项，因此下一个菜单应为： -

标题=选择结束

选项=黄铜，铬，缎镍（基于您选择的类型）

其他选项也是如此。

这是JSON文件：

{
    "Families": {
        "title": "Choose a family",
        "options": [
            {
                "name": "Victorian",
                "thumbnail": "/modules/DoorSelector/images/victorian_thumb.jpg",
                "options": {
                    "title": "Choose a finish",
                    "options": [
                        {
                            "name": "Brass",
                            "thumbnail": "/modules/DoorSelector/images/victorian_brass.jpg",
                            "material": "brass",
                            "sku": "DFU0611"
                        },
                        {
                            "name": "Chrome",
                            "thumbnail": "/modules/DoorSelector/images/victorian_chrome.jpg",
                            "material": "chrome",
                            "sku": "DFU0611"
                        },
                        {
                            "name": "Satin Nickel",
                            "thumbnail": "/modules/DoorSelector/images/victorian_satin_nickel.jpg",
                            "material": "satin_nickel",
                            "sku": "DFU0611"
                        }
                    ]
                }
            },
            {
                "name": "Chrissi",
                "thumbnail": "/modules/DoorSelector/images/chrissi_thumb.jpg",
                "options": {
                    "options": [
                        {
                            "name": "Brass",
                            "thumbnail": "/modules/DoorSelector/images/chrissi_brass.jpg",
                            "material": "brass",
                            "sku": "Chrissi"
                        },
                        {
                            "name": "Chrome",
                            "thumbnail": "/modules/DoorSelector/images/chrissi_chrome.jpg",
                            "material": "chrome",
                            "sku": "Chrissi"
                        },
                        {
                            "name": "Satin Nickel",
                            "thumbnail": "/modules/DoorSelector/images/chrissi_satin_nickel.jpg",
                            "material": "satin_nickel",
                            "sku": "Chrissi"
                        }
                    ]
                }
            },
            {
                "name": "Garda",
                "thumbnail": "/modules/DoorSelector/images/garda_thumb.jpg",
                "options": {
                    "options": [
                        {
                            "name": "Brass",
                            "thumbnail": "/modules/DoorSelector/images/garda_brass.jpg",
                            "material": "brass",
                            "sku": "DFU0820"
                        },
                        {
                            "name": "Chrome",
                            "thumbnail": "/modules/DoorSelector/images/garda_chrome.jpg",
                            "material": "chrome",
                            "sku": "DFU0820"
                        },
                        {
                            "name": "Satin Nickel",
                            "thumbnail": "/modules/DoorSelector/images/garda_satin_nickel.jpg",
                            "material": "satin_nickel",
                            "sku": "DFU0820"
                        }
                    ]
                }
            }
        ]
    }
}

这是我来的。正如您所看到的，当涉及到第二级选项/完成时，它只显示所有这些选项。

我目前的HTML：

<div data-target="handles" class="handlesOuterContainer show">
    <div class="levelOneHandles">
        <p class="menuTitle">Choose a family</p>
        <div class="menuOption"><img class="familyThumbnail back" src="/modules/DoorSelector/images/arrow_back.jpg">
        </div>
        <div data-trigger="handles_victorian" class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/victorian_thumb.jpg">
            <p class="familyTitle">Victorian</p>
        </div>
        <div data-trigger="handles_chrissi" class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/chrissi_thumb.jpg">
            <p class="familyTitle">Chrissi</p>
        </div>
        <div data-trigger="handles_garda" class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/garda_thumb.jpg">
            <p class="familyTitle">Garda</p>
        </div>
    </div>
    <div data-target="handles_victorian" class="levelTwoHandles">
        <div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/victorian_brass.jpg">
            <p class="familyTitle">Victorian</p>
        </div>
    </div>
    <div data-target="handles_victorian" class="levelTwoHandles">
        <div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/victorian_chrome.jpg">
            <p class="familyTitle">Victorian</p>
        </div>
    </div>
    <div data-target="handles_victorian" class="levelTwoHandles">
        <div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/victorian_satin_nickel.jpg">
            <p class="familyTitle">Victorian</p>
        </div>
    </div>
    <div data-target="handles_chrissi" class="levelTwoHandles">
        <div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/chrissi_brass.jpg">
            <p class="familyTitle">Chrissi</p>
        </div>
    </div>
    <div data-target="handles_chrissi" class="levelTwoHandles">
        <div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/chrissi_chrome.jpg">
            <p class="familyTitle">Chrissi</p>
        </div>
    </div>
    <div data-target="handles_chrissi" class="levelTwoHandles">
        <div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/chrissi_satin_nickel.jpg">
            <p class="familyTitle">Chrissi</p>
        </div>
    </div>
    <div data-target="handles_garda" class="levelTwoHandles">
        <div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/garda_brass.jpg">
            <p class="familyTitle">Garda</p>
        </div>
    </div>
    <div data-target="handles_garda" class="levelTwoHandles">
        <div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/garda_chrome.jpg">
            <p class="familyTitle">Garda</p>
        </div>
    </div>
    <div data-target="handles_garda" class="levelTwoHandles">
        <div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/garda_satin_nickel.jpg">
            <p class="familyTitle">Garda</p>
        </div>
    </div>
</div>

HTML应该如何显示：

<div data-target="handles" class="handlesOuterContainer show">
    <div class="levelOneHandles">
        <p class="menuTitle">Choose a family</p>
        <div class="menuOption"><img class="familyThumbnail back" src="/modules/DoorSelector/images/arrow_back.jpg">
        </div>
        <div data-trigger="handles_victorian" class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/victorian_thumb.jpg">
            <p class="familyTitle">Victorian</p>
        </div>
        <div data-trigger="handles_chrissi" class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/chrissi_thumb.jpg">
            <p class="familyTitle">Chrissi</p>
        </div>
        <div data-trigger="handles_garda" class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/garda_thumb.jpg">
            <p class="familyTitle">Garda</p>
        </div>
    </div>
    <div data-target="handles_victorian" class="levelTwoHandles">
        <div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/victorian_brass.jpg">
            <p class="familyTitle">Brass</p>
        </div>
        <div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/victorian_chrome.jpg">
            <p class="familyTitle">Chrome</p>
        </div>
        <div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/victorian_satin_nickel.jpg">
            <p class="familyTitle">Satin Nickel</p>
        </div>
    </div>

     <div data-target="handles_chrissi" class="levelTwoHandles">
        <div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/chrissi_brass.jpg">
            <p class="familyTitle">Brass</p>
        </div>
        <div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/chrissi_chrome.jpg">
            <p class="familyTitle">Chrome</p>
        </div>
        <div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/chrissi_satin_nickel.jpg">
            <p class="familyTitle">Satin Nickel</p>
        </div>
    </div>

     <div data-target="handles_garda" class="levelTwoHandles">
        <div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/garda_brass.jpg">
            <p class="familyTitle">Brass</p>
        </div>
        <div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/garda_chrome.jpg">
            <p class="familyTitle">Chrome</p>
        </div>
        <div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/garda_satin_nickel.jpg">
            <p class="familyTitle">Satin Nickel</p>
        </div>
    </div>
</div>

JQuery的：

$.getJSON("/modules/DoorSelector/handles.json", function(data){

    var levelOneHandlesContainer = '.levelOneHandles';

    // main container title
    $(levelOneHandlesContainer).append('<p class="menuTitle">'+data.Families.title+'</p>');

    // back button
    $(levelOneHandlesContainer).append('<div class="menuOption"><img src="/modules/DoorSelector/images/arrow_back.jpg" class="familyThumbnail back"></div>');

    // loop through objects
    $.each(data.Families.options, function(index, value) {

        // write options to container
        $(levelOneHandlesContainer).append('<div class="menuOption" data-trigger="handles_'+value.name.toLowerCase()+'"><img src='+value.thumbnail+' class="familyThumbnail" /><p class="familyTitle">'+value.name+'</p></div>');

        // second level
        $.each(this, function(index, value2) {
            $.each(this.options, function(index, value3) {
                $('.handlesOuterContainer').append('<div class="levelTwoHandles" data-target="handles_'+value.name.toLowerCase()+'"><div class="menuOption"><img src='+value3.thumbnail+' class="familyThumbnail" /><p class="familyTitle">'+value.name+'</p></div></div>');
            });
        });
    });

});

Answer 1

而不是多次实现此逻辑，可能更容易创建完整的结构（一旦加载JSON）并添加eventListeners，它们切换active - 类，然后显示/隐藏元素。像这样的东西（功能不全，只是一个如何做的例子）：

HTML（从configObject创建之后）

<div class="level-1">
  <h1>title here</h1>
  <div class="option-1 handle">
    <h2>label option 1</h2>
    <div class="handle-content">
      this is the content of the first handle, shown as soon as the parent gets the .active class
      ...
    </div>
  </div>
  <div class="option-2 handle">
    <h2>label option 2</h2>
    <div class="handle-content">
      this is the content of the second handle, shown as soon as the parent gets the .active class
      ...
    </div>
  </div>    </div>

CSS

.handle-content {
  display: none;
}
.handle.active > .handle-content {
  display: block;
}

JS（在用JavaScript创建html后执行此操作）

$(".handles").on('click', function() {
  $(this).toggleClass('active');
});

Answer 2

以下代码可能会为您提供一些指导。即使我使用选择和选项列表，方法应该是相同的。当您在第一个选择列表的选项中选择一个项目时，新的选择列表将显示仅在第一个列表中选择的项目下可用的选项（在您的数据中它们都与“黄铜”，“Chrome”和“Satin”相同）镍”）。您可以为每个主要组分配不同的完成，并相应地列出它们。

var data = {"Families":{"title":"Choose a family","options":[{"name":"Victorian","thumbnail":"/modules/DoorSelector/images/victorian_thumb.jpg","options":{"title":"Choose a finish","options":[{"name":"Brass","thumbnail":"/modules/DoorSelector/images/victorian_brass.jpg","material":"brass","sku":"DFU0611"},{"name":"Chrome","thumbnail":"/modules/DoorSelector/images/victorian_chrome.jpg","material":"chrome","sku":"DFU0611"},{"name":"Satin Nickel","thumbnail":"/modules/DoorSelector/images/victorian_satin_nickel.jpg","material":"satin_nickel","sku":"DFU0611"}]}},{"name":"Chrissi","thumbnail":"/modules/DoorSelector/images/chrissi_thumb.jpg","options":{"options":[{"name":"Brass","thumbnail":"/modules/DoorSelector/images/chrissi_brass.jpg","material":"brass","sku":"Chrissi"},{"name":"Chrome","thumbnail":"/modules/DoorSelector/images/chrissi_chrome.jpg","material":"chrome","sku":"Chrissi"},{"name":"Satin Nickel","thumbnail":"/modules/DoorSelector/images/chrissi_satin_nickel.jpg","material":"satin_nickel","sku":"Chrissi"}]}},{"name":"Garda","thumbnail":"/modules/DoorSelector/images/garda_thumb.jpg","options":{"options":[{"name":"Brass","thumbnail":"/modules/DoorSelector/images/garda_brass.jpg","material":"brass","sku":"DFU0820"},{"name":"Chrome","thumbnail":"/modules/DoorSelector/images/garda_chrome.jpg","material":"chrome","sku":"DFU0820"},{"name":"Satin Nickel","thumbnail":"/modules/DoorSelector/images/garda_satin_nickel.jpg","material":"satin_nickel","sku":"DFU0820"}]}}]}};
  seldiv = document.getElementById("selcon");

function createOptions(obj){
  var df = document.createDocumentFragment(),
     len = obj.options.length,
   selel = df.appendChild(document.createElement("select")),
    opel = selel.appendChild(document.createElement("option"));
  opel.value = obj.title || "Choose a finish";
  opel.innerText = obj.title || "Choose a finish";
  opel.hidden = true;
  for (var i = 0; i < len; i++){
    opel = selel.appendChild(document.createElement("option"));
    opel.value = obj.options[i].name;
    opel.innerText = obj.options[i].name;
  }
  return df;
}

function getSubSelection(obj,key){
  var fo = obj.options.find(f => f.name == key);
  !!seldiv.children[1] ? seldiv.replaceChild(createOptions(fo.options), seldiv.children[1])
                       : seldiv.appendChild(createOptions(fo.options));
  seldiv.children[1].addEventListener("change", e => console.log("do something with " + key + " and " + e.target.value));
}

seldiv.appendChild(createOptions(data.Families));
seldiv.children[0].addEventListener("change", e => getSubSelection(data.Families,e.target.value));

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>

<body>
  <div id="selcon">
  </div>
</body>

</html>

Answer 3

感谢您的所有输入，我设法通过为我的HTML创建字符串并在循环过程中附加它们来解决这个问题。我确信这只是这样做的一种方式。

$.getJSON("/modules/DoorSelector/handles.json", function(data){

    var handlesOuterContainer = '.handlesOuterContainer';
    var mainTitle = '<p class="menuTitle">'+data.Families.title+'</p>';
    var backButton = '<div class="menuOption"><img src="/modules/DoorSelector/images/arrow_back.jpg" class="familyThumbnail back"></div>';
    var upButton = '<div class="menuOption"><img src="/modules/DoorSelector/images/arrow_up.jpg" class="familyThumbnail up"></div>';
    var OuterContainerString = '';          
    var InnerContainerString = '';  
    var level1str = '';
    var level2str = '';
    var level3str = '';
    var level2title ='';

    $.each(data.Families.options, function(index, value) {
        level1str += '<div class="menuOption" data-trigger="handles_'+value.name.toLowerCase()+'"><img src='+value.thumbnail+' class="familyThumbnail" /><p class="familyTitle">'+value.name+'</p></div>';
        $.each(this, function(index, value2) {
            level2str = '';
            if (value.title == "Choose a finish") {
                level1str += '<p class="menuTitle">'+value.title+'</p>';
            }

            level3str = '';
            if (value2.title!= 'undefined'){
                level2title = '<p class="menuTitle">'+value2.title+'</p>';
            }
            $.each(this.options, function(index, value3) {
                if (level2str==''){
                    level2str='<div class="levelTwoHandles" data-target="handles_'+value.name.toLowerCase()+'">' + level2title + upButton;
                }
                level3str += '<div class="menuOption"><img src='+value3.thumbnail+' class="familyThumbnail" /><p class="familyTitle">'+value3.name+'</p></div>';
            });
            InnerContainerString += level2str + level3str + '</div>';
        });
        if (OuterContainerString==''){
                level1str=mainTitle + backButton + level1str;
            }
        OuterContainerString = '<div class="levelOneHandles">' + level1str + '</div>' +  InnerContainerString;
    });
    $(handlesOuterContainer).prepend(OuterContainerString);
});