利用js实现点击按钮实现图片排序

JS实现点击按钮图片排序效果

我是本际云服务器推荐网的小编小本本，今天给大家介绍一下如何使用JS实现点击按钮图片排序效果。

实现效果

1、点击按钮

• 如果按钮文字是从大到小，将li标签按照从大到小的顺序排列文字改成从小到大。
• 如果按钮文字是从小到大，将li标签按照从小到大的顺序排列文字变成从大到小。
• 2、点击按钮将li随机排序。

具体实现代码如下：

<style>

  * {

    padding: 0;

    margin: 0;

    list-style: none;

  }

  .wrap {

    width: 440px;

      margin: 50px auto;

      text-align: center;

  }

  ul li {

    float: left;

      width: 100px;

      height: 130px;

      margin-right: 10px;

      margin-bottom: 10px;

      font-size: 12px;

    }

  ul li img {

    width: 100px;

      height: 100px;

  }

  ul li p {

    line-height: 30px;

      text-align: center;

      font-size: 12px;

  }

  .wrap button {

    display: inline-block;

      width: 100px;

      height: 40px;

      text-align: center;

      line-height: 40px;

      background-color: red;

      border: none;

      margin-right: 20px;

      margin-bottom: 20px;

      color: #fff;

      font-size: 16px;

  }

</style>

<div class="wrap">

  <button>从大到小</button><button>随机排序</button>

  <ul>

    <li>

      <img src="./img1.jfif" alt="">

      柴犬<span>1</span>

    </li>

    <li>

      <img src="./img2.jfif" alt="">

      柴犬<span>2</span>

    </li>

    <li>

      <img src="./img3.jfif" alt="">

      柴犬<span>3</span>

    </li>

    <li>

      <img src="./img4.jfif" alt="">

      柴犬<span>4</span>

    </li>

    <li>

      <img src="./img5.jfif" alt="">

      柴犬<span>5</span>

    </li>

    <li>

      <img src="./img6.jfif" alt="">

      柴犬<span>6</span>

    </li>

    <li>

      <img src="./img7.jfif" alt="">

      柴犬<span>7</span>

    </li>

    <li>

      <img src="./img8.jfif" alt="">

      柴犬<span>8</span>

    </li>

  </ul>

  <script>

    /*

    2. 效果

    2.1 点击按钮

    如果按钮文字是从大到小 将li标签按照从大到小的顺序排列 文字改成从小到大

    如果按钮文字是从小到大 将li标签按照从小到大的顺序排列 文字变成从大到小

    2.2 点击按钮 将li随机排序

    标签排序比较快

    注意:

    获取元素方式:

    document/父元素.getElementsByTagName()

    document/父元素.getElementsByClassName()

    */

    // 1.获取元素 button li ul

    var btns = document.getElementsByTagName('button');

    var lis = document.getElementsByTagName('li');

    var ul = document.getElementsByTagName('ul')[0];

    console.log(btns, lis, ul);

    // 5.将集合转成数组

    var liarr = [];

    for (var i = 0; i < lis.length; i++) {

      liarr.push(lis[i]);

    }

    console.log(liarr);

    // 2.添加事件

    btns[0].onclick = function () {

      // 3.如果按钮是从大到小

      if (this.innerText == '从大到小') {

        // 4.将li标签按照从大到小的顺序排列

        liarr.sort(function (a, b) {

          console.log(a, b);

          // 6.获取a、b中的span

          var as = a.getElementsByTagName('span')[0].innerText;

          var bs = b.getElementsByTagName('span')[0].innerText;

          console.log(as, bs);

          // 7.设置返回值

          return bs - as;

        });

        // 9.更新文字

        this.innerText = '从小到大'

      } else {

        liarr.sort(function (a, b) {

          console.log(a, b);

          var as = a.getElementsByTagName('span')[0].innerText;

          var bs = b.getElementsByTagName('span')[0].innerText;

          return as - bs;

        });

        this.innerText = '从大到小'

      }

      // console.log(liarr);

      // 8.渲染到ul中

      // 8.1清空页面中ul的内容

      ul.innerHTML = '';

      // 8.2.将liarr里面的每一个数据渲染到页面ul中

      for (var j 

                                                        
原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7291.html