如何在列表元素上使用swipe事件添加选项和条件？

// 使用jQuery Mobile处理swipe事件
$('.list-item').on('swipe', function(event) {
  var direction = event.direction;
  var distance = event.distance;

  if (direction === 'left' && distance > 100) {
    // 向左滑动超过100像素，执行删除操作
    $(this).find('.delete-button').show();
  } else if (direction === 'right' && distance > 100) {
    // 向右滑动超过100像素，执行编辑操作
    $(this).find('.edit-button').show();
  }
});

// 使用原生JavaScript处理swipe事件
var listItem = document.querySelector('.list-item');
listItem.addEventListener('swipe', function(event) {
  var direction = event.direction;
  var distance = event.distance;

  if (direction === 'left' && distance > 100) {
    // 向左滑动超过100像素，执行删除操作
    listItem.querySelector('.delete-button').style.display = 'block';
  } else if (direction === 'right' && distance > 100) {
    // 向右滑动超过100像素，执行编辑操作
    listItem.querySelector('.edit-button').style.display = 'block';
  }
});