基于jquery实现左滑删除功能

技术文摘

2025-01-10 20:29:44 小编

在网页开发中，左滑删除功能能够为用户带来便捷的操作体验。借助强大的 jQuery 库，我们可以轻松实现这一实用功能。

搭建基本的 HTML 结构。创建一个列表元素，每个列表项代表需要实现左滑删除的内容。例如：

<ul id="myList">
  <li>待办事项 1</li>
  <li>待办事项 2</li>
  <li>待办事项 3</li>
</ul>

接着引入 jQuery 库，这是实现功能的基础。可以通过 CDN 链接快速引入，确保在 HTML 文件的 <head> 标签内或者页面底部合适位置添加链接。

然后编写 jQuery 代码来实现左滑删除逻辑。通过 $(document).ready() 函数确保页面加载完成后执行代码。

$(document).ready(function() {
  // 为每个列表项绑定触摸开始事件
  $('#myList li').on('touchstart', function(event) {
    var startX = event.originalEvent.touches[0].clientX;
    $(this).data('startX', startX);
  });

  // 为每个列表项绑定触摸移动事件
  $('#myList li').on('touchmove', function(event) {
    var currentX = event.originalEvent.touches[0].clientX;
    var startX = $(this).data('startX');
    var diffX = startX - currentX;

    if (diffX > 50) { // 左滑距离大于50px
      $(this).addClass('swiped');
    } else {
      $(this).removeClass('swiped');
    }
  });

  // 为每个列表项绑定触摸结束事件
  $('#myList li').on('touchend', function() {
    $(this).removeClass('swiped');
  });

  // 为左滑显示的删除按钮绑定点击事件
  $('#myList li.delete-btn').on('click', function() {
    $(this).closest('li').remove();
  });
});

在 CSS 中，定义 swiped 类，用于在左滑时显示删除按钮等样式效果。

#myList li {
  position: relative;
  padding: 10px;
  background-color: #f0f0f0;
  margin-bottom: 5px;
}

#myList li.delete-btn {
  position: absolute;
  right: -50px;
  top: 0;
  width: 50px;
  height: 100%;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 30px;
  display: none;
}

#myList li.swiped.delete-btn {
  display: block;
}

通过以上步骤，我们基于 jQuery 成功实现了左滑删除功能。这一功能不仅提升了用户与页面的交互性，还优化了信息管理的效率，在各类列表展示场景中都具有很高的实用性。

TAGS: jQuery技术应用左滑删除效果功能实现细节

万千站长工具

技术文摘

基于jquery实现左滑删除功能

欢迎使用万千站长工具！