Question

大家好，我不太确定我是否正确提问，因为这是我第一次开始编码。如果有人能指出我正确的学习方向，并且问正确的问题会很棒。

所以我试图写一个维修服务网站，当客户选择一个品牌说＆＃34; HP＆＃34;时，惠普笔记本电脑型号表将显示为选项。但如果客户选择＆＃34; Apple＆＃34;，桌上的笔记本电脑型号将被苹果笔记本电脑型号取代。

    <div class ="container" id="repair">
    <ul class="brand">
    <li data-id="1" class>Apple</li>
    <li data-id="2" class>Lenovo</li>
    <li data-id="3" class>Dell</li>
    <li data-id="4" class>HP</li>
    </ul><!-- end of brand -->

    <div class ="title">Model</div>
    <ul id="model" class="model">
    <li data-id="11" data-name="MacBook Air">MacBook Air</li>
    <li data-id="12" data-name="MacBook Pro">MacBook Pro</li>
    <li data-id="13" data-name="MacBook">MacBook</li>
    <li data-id="21" data-name="Lenovo X260">Lenovo X260</li>
    <li data-id="22" data-name="Lenovo X270">Lenovo X270</li>
    <li data-id="23" data-name="Lenovo X280">Lenovo X280</li>
    <li data-id="31" data-name="Dell Latitude 1400">Dell Latitude 1400</li>
    </ul> <!--end of table-->
</div>

所以我的问题是，如何选择data-id 1时，如何编码，只显示数据ID 11,12,13而不显示其他数据？

由于

Answer 1

您可以为charAt(0)列表检查data-id的{{1}}。然后告诉他们是否匹配。考虑您点击model

的li元素

＆＃13;

brand

＆＃13;

$('.brand li').click(function(){
  var dataId = $(this).data('id').toString();
  $('#model li').hide();
  $('#model li').each(function(){
    if($(this).data('id').toString().charAt(0) === dataId){
      $(this).show();
    }
  });
});

＆＃13;

#model li{
 display: none;
}

＆＃13;

Answer 2

我们可以将所有品牌和商品存储为JSON对象，如下所示：

"Products": [
    "Apple": {
        "MacBook",
        "MacBook Air",
        "MacBook Pro"
    },
    "HP": {
        "..."
    },
    ...
]

然后我们可以在JavaScript文件中使用它来从外部修改列表的内容以查看所选内容。对于选择，我会使用<input> tag。

html5网站加载表

2 个答案: