jq实现元素置顶排序功能

最新推荐文章于 2023-07-24 23:59:02 发布

小灰灰学编程

最新推荐文章于 2023-07-24 23:59:02 发布

阅读量381

点赞数 1

分类专栏： JavaScript 文章标签：前端 javascript jquery 置顶排序

本文链接：https://blog.csdn.net/Chen_AC/article/details/129898957

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

html

定义列表，包含文案和置顶图标，通过样式让图标在鼠标经过行时显示在最右边

<body>
  <div class="list">
    <div class="list-item"><div>系列1</div><div class="list-item-topping"></div></div>
    <div class="list-item"><div>系列2</div><div class="list-item-topping"></div></div>
    <div class="list-item"><div>系列3</div><div class="list-item-topping"></div></div>
    <div class="list-item"><div>系列4</div><div class="list-item-topping"></div></div>
    <div class="list-item"><div>系列5</div><div class="list-item-topping"></div></div>
    <div class="list-item"><div>系列6</div><div class="list-item-topping"></div></div>
  </div>
</body>

script

给每一行绑定鼠标over/leave事件，用来判断是否显示置顶图标

给置顶图标绑定点击事件，将当前点击的图标的parent()元素放在list列表的首位

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
  $("body").off("mouseover", ".list-item").on("mouseover", ".list-item", function (){
    $($(this)[0].children[1]).show()
  }).on("mouseleave", ".list-item", function (){
    $($(this)[0].children[1]).hide()
  })

  $("body").off("click", ".list-item-topping").on("click", ".list-item-topping", function (){
    $(".list-item:first-child").before($(this).parent()[0])
  })
</script>

css

<style>
      .list {
        width: 300px;
        height: 300px;
        border: 1px solid #f2f2f2;
      }
      .list-item {
        height: 50px;
        line-height: 50px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        position: relative;
      }
      .list-item:hover {
        background: #E2F4FB;
      }
      .list-item-topping {
        width: 18px;
        height: 18px;
        position: absolute;
        right: 10px;
        display: none;
        background-image: url("./topping.png");
      }
      .list-item-topping:hover {
        cursor: pointer;
        background-image: url("./topping-highlight.png");
      }
    </style>