用jQuery重写。saveBtn.addEventListener('click', function() { if (arr) { localStorage.setItem('data', JSON.stringify(arr)) } else { localStorage.setItem('data', JSON.stringify([])) arr = [] } init() })

使用jQuery重写后的代码如下：

$(document).on('click', '#saveBtn', function() {
    if (arr) {
        localStorage.setItem('data', JSON.stringify(arr));
    } else {
        localStorage.setItem('data', JSON.stringify([]));
        arr = [];
    }
    init();
});

这里使用了jQuery的事件委托方式，将事件绑定在整个document上，通过选择器来指定目标元素。同时也可以省略saveBtn变量，直接在选择器中使用即可。

相关问题

function showModal(type, index) { let modal = document.getElementById('modal'); let form = modal.querySelector('form'); let saveBtn = modal.querySelector('#save-btn'); let cancelBtn = modal.querySelector('#cancel-btn'); if (type === 'add') { form.reset(); saveBtn.textContent = '添加'; } else if (type === 'edit') { let contact = contacts[index]; form.name.value = contact.name; form.phone.value = contact.phone; form.email.value = contact.email; saveBtn.textContent = '保存'; } modal.style.display = 'block';怎么给里面的编辑和删除按钮添加样式

你可以在 HTML 代码中为编辑和删除按钮添加类名，然后在 CSS 中定义这些类的样式。例如：

HTML 代码：

<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>

CSS 代码：

.edit-btn {
  background-color: blue;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.delete-btn {
  background-color: red;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

在这个示例中，我们为编辑按钮和删除按钮分别添加了 `edit-btn` 和 `delete-btn` 类，并为这些类定义了一些基本的样式，包括背景颜色、文字颜色、边框、内边距和鼠标指针样式。你可以根据自己的需要调整这些样式。

// 显示弹出层（添加或编辑联系人） function showModal(type, index) { let modal = document.getElementById('modal'); let form = modal.querySelector('form'); let saveBtn = modal.querySelector('#save-btn'); let cancelBtn = modal.querySelector('#cancel-btn'); if (type === 'add') { form.reset(); saveBtn.textContent = '添加'; } else if (type === 'edit') { let contact = contacts[index]; form.name.value = contact.name; form.phone.value = contact.phone; form.email.value = contact.email; saveBtn.textContent = '保存'; } modal.style.display = 'block';添加一个弹窗抖动

可以通过 CSS3 的动画效果来实现弹窗抖动的效果。具体实现步骤如下：

1. 在 CSS 文件中添加以下代码：

@keyframes shake {
  0% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80%, 100% { transform: translateX(10px); }
}

.shake {
  animation: shake 0.5s;
}

2. 在 JavaScript 文件中，在显示弹窗的代码后面添加以下代码：

modal.classList.add('shake');
setTimeout(() => {
  modal.classList.remove('shake');
}, 500);

这段代码会给弹窗添加 `shake` 类，触发 CSS 中的抖动动画效果，然后在 0.5 秒后移除 `shake` 类，使弹窗停止抖动。

注意：需要根据实际情况调整动画效果的时间和距离，以达到最佳效果。