html5网站加载表

Question

大家好，我不太确定我是否问对了这个问题，因为这是我第一次编码。如果有人能给我指出正确的学习方向，并提出正确的问题，那就太棒了。

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

    <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时，我如何编写它，只显示data-id 11，12,13，而其他的都不显示？

谢谢

Answer 1

您可以在model列表中检查data-id的charAt(0)。如果匹配，则显示它们。考虑到您单击brand的li元素

​

$('.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();
    }
  });
});

#model li{
 display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

​

Answer 2

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

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

然后，我们可以在JavaScript文件中使用它来外部修改列表的内容。对于选择，我将使用 tag。