jQuery分类筛选-jquery案例-前端日记簿

首页 jquery案例正文

jQuery分类筛选

2023-10-30 83

效果图：

从上面可以看见我们通过点击上面的导航切换进行筛选的内容当点击停止时将被选中的显示

html：

给所有的li添加上id 方便后面的区分

 <div class="box">
      <div class="top-list">
        <ul>
          <li id="1" class="">全部</li>
          <li id="2">简餐</li>
          <li id="3">小吃</li>
          <li id="4">麻辣</li>
          <li id="5">炒菜</li>
        </ul>
      </div>
      <div class="btn">
        <button class="up">开始</button>
        <button class="stop">停止</button>
      </div>
      <p class="Txt">炒菜</p>
    </div>

js中我们首先声明四个数组以及声明一个变量将四个数组都合并到一起包括声明一个变量item

当我们点击li时给点击的li添加样式其余兄弟移除并且通过attr获取到被点击li的id 并且将它转化为数字类型

紧接着我们进行一个if判断通过判断id来进行下面的操作当点击开始按钮时

 if (num === 1) {
      $(".up").click(function () {
        addCs();
        tip(all);
      });
    } else if (num === 2) {
      $(".up").click(function () {
        addCs();
        tip(meal);
        console.log(num);
      });
    } else if (num === 3) {
      $(".up").click(function () {
        addCs();
        tip(snack);
      });
    } else if (num === 4) {
      $(".up").click(function () {
        addCs();
        tip(spicy);
      });
    } else if (num === 5) {
      $(".up").click(function () {
        addCs();
        tip(fied);
      });
    }

将开始和停止的按钮对应的处理封装起来方便调用

然后将筛选的定时器进行封装设置一个形参通过random进行随机筛选并且筛选的值是传进来的数组长度然后将筛选到的值

通过数组下标的方式显示在p标签上定时器间隔为200ms执行一次

当点击停止按钮时移除定时器包括使用remcs方法

这里在之前书写时一直遇到没有解决的错误按以上方法进行操作在点击第一个进行筛选没有问题当点击第二次开始筛选时定时器会停不下来控制不了

使用函数需要在每次调用定时器时去在封装的定时器方法中在清除一次定时器

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>分类随机挑选</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      body {
        background: yellow;
      }
      .box {
        width: 1000px;
        margin: 100px auto;
      }
      .top-list {
        width: 720px;
        height: 80px;
        margin: auto;
      }
      .top-list ul {
        overflow: hidden;
      }
      .top-list ul li {
        cursor: pointer;
        width: 120px;
        float: left;
        line-height: 60px;
        border-radius: 10px;
        letter-spacing: 10px;
        margin-left: 15px;
        text-align: center;
        font-size: 20px;
        color: #000;
      }
      .top-list ul li.cur {
        background: #fff;
        width: 140px;
        font-size: 22px;
      }
      .btn {
        width: 200px;
        height: 50px;
        margin: 150px auto;
      }
      button {
        margin: auto;
        display: block;
        width: 100px;
        height: 50px;
        outline: none;
        border: 0;
        color: #323232;
        cursor: pointer;
        font-size: 30px;
        background: none;
        font-weight: bold;
        letter-spacing: 10px;
      }
      button:nth-child(2) {
        display: none;
        color: red;
      }
      .Txt {
        margin: auto;
        text-align: center;
        width: 200px;
        line-height: 50px;
        font-size: 40px;
        color: #0099cc;
        font-weight: bold;
        letter-spacing: 10px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="top-list">
        <ul>
          <li id="1" class="">全部</li>
          <li id="2">简餐</li>
          <li id="3">小吃</li>
          <li id="4">麻辣</li>
          <li id="5">炒菜</li>
        </ul>
      </div>
      <div class="btn">
        <button class="up">开始</button>
        <button class="stop">停止</button>
      </div>
      <p class="Txt">炒菜</p>
    </div>
  </body>
</html>
<script src="../index.js/jquery.js"></script>
<script>
  let meal = ["汉堡", "薯条", "鸡肉卷", "薯塔"];
  let snack = ["炸串", "螺蛳粉", "炸鸡", "过桥米线"];
  let spicy = ["火锅", "串串", "麻辣烫", "麻辣冒菜"];
  let fied = ["青椒肉丝", "宫保鸡丁", "鱼香肉丝", "糖醋排骨", "红烧肉"];
  var item;
  var all = meal.concat(snack, spicy, snack, fied);
  $(".top-list li").click(function () {
    $(this).addClass("cur").siblings().removeClass("cur");
    var num = Number($(this).attr("id"));

    // 开始
    function addCs() {
      $(".up").css("display", "none");
      $(".stop").css("display", "block");
    }
    // 停止
    function remcs() {
      $(".stop").css("display", "none");
      $(".up").css("display", "block");
    }
    function tip(index) {
      clearInterval(item);
      item = setInterval(function () {
        var n = Math.floor(Math.random() * index.length);
        $(".Txt").text(index[n]);
      }, 200);
    }
    if (num === 1) {
      $(".up").click(function () {
        addCs();
        tip(all);
      });
    } else if (num === 2) {
      $(".up").click(function () {
        addCs();
        tip(meal);
        console.log(num);
      });
    } else if (num === 3) {
      $(".up").click(function () {
        addCs();
        tip(snack);
      });
    } else if (num === 4) {
      $(".up").click(function () {
        addCs();
        tip(spicy);
      });
    } else if (num === 5) {
      $(".up").click(function () {
        addCs();
        tip(fied);
      });
    }
    $(".stop").click(function () {
      remcs();
      clearInterval(item);
    });
  });
</script>

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=158

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。