Jq分类随机点餐

先看一下页面布局：

下面是代码布局：

<div class="main">

        <ul>

            <li class="types all" data-index="0">全部</li>

            <li class="types aa" data-index="1">简餐</li>

            <li class="types bb" data-index="2">饮品</li>

            <li class="types cc" data-index="3">麻辣鲜香</li>

            <li class="types dd" data-index="4">甜点</li>

        </ul>

    <div class="button"><span>开始</span></div>

    <div class="name"><span id='ko'>随机名称</span></div>

</div>

<div class="tips">如果您点击超过十次还没有选到满意的菜单，也许在你心里面早已有答案。遵循自己的内心吧~！</div>

还有CSS的代码：

body{background: #ef4009c2}

    .main{

        width: 660px;

        height: 760px;

        margin: 80px auto;

    }

    .button{

        height: 100px;

        color: #fff;

        font-weight:bold;

        font-size: 58px;

        position: relative;

        top: 210px;

        text-align: center;

        cursor: pointer;