EP094. “动态删除 ID、实时移除笔记与进入编辑模式”

首页 › WordPress 开发课程 › MY NOTES 前端功能 · EP094

约 13 分钟· #EP094#MY NOTES 前端功能

📌 并入 EP093 的提醒：下一讲要写 wp_create_nonce('wp_rest') 时，常见的手误是把下划线 wp_rest打成连字符 wp-rest，请留意。另外为了让笔记展开/收起的滑动动画（jQuery slideUp/slideDown）顺滑，需要先去 css/modules/my-notes.css 第 131 行附近找到「Reveal and Hide Fade Transitions」这段 CSS，用 /* */ 注释掉而不是直接删除——因为后面课程会有一个 jQuery-free 版本仍然需要这段 CSS，先注释方便以后原样恢复。

这一讲把上一讲写死的删除 ID 改成动态获取，并且让删除成功后直接用动画从页面上移除该笔记（不用手动刷新）；然后开始搭「编辑模式」：输入框/文本域默认设为只读，点击 Edit 按钮才解除只读、加高亮边框、露出 Save 按钮。

涉及文件

wp-content/themes/fictional-university-theme/page-my-notes.php （修改）
wp-content/themes/fictional-university-theme/src/modules/MyNotes.js （修改）
wp-content/themes/fictional-university-theme/css/modules/my-notes.css （注释掉一段过渡动画 CSS，本讲不展开贴 CSS 代码）

代码实现

page-my-notes.php：给每条笔记的 <li> 加 data-id，输入框/文本域默认只读，新增 Save 按钮：

<li data-id="<?php the_ID(); ?>">
  <input readonly class="note-title-field" value="<?php echo esc_attr(get_the_title()); ?>">
  <span class="edit-note"><i class="fa fa-pencil" aria-hidden="true"></i> Edit</span>
  <span class="delete-note"><i class="fa fa-trash-o" aria-hidden="true"></i> Delete</span>
  <textarea readonly class="note-body-field"><?php echo esc_attr(wp_strip_all_tags(get_the_content())); ?></textarea>
  <span class="update-note btn btn--blue btn--small"><i class="fa fa-arrow-right" aria-hidden="true"></i> Save</span>
</li>

src/modules/MyNotes.js：deleteNote() 改成动态取 ID + 成功后滑动移除，新增 editNote() 方法：

// wp-content/themes/fictional-university-theme/src/modules/MyNotes.js

events() {
  $(".delete-note").on("click", this.deleteNote)
  $(".edit-note").on("click", this.editNote) // 新增
}

// 新增
editNote(e) {
  var thisNote = $(e.target).parents("li")
  thisNote.find(".note-title-field, .note-body-field").removeAttr("readonly").addClass("note-active-field")
  thisNote.find(".update-note").addClass("update-note--visible")
}

deleteNote(e) {
  var thisNote = $(e.target).parents("li") // 新增：定位到当前点击项所在的 <li>

  $.ajax({
    beforeSend: xhr => {
      xhr.setRequestHeader("X-WP-Nonce", universityData.nonce)
    },
    url: universityData.root_url + "/wp-json/wp/v2/note/" + thisNote.data("id"), // 修改：ID 改成动态读取
    type: "DELETE",
    success: response => {
      thisNote.slideUp() // 新增：删除成功后用滑动动画移除该笔记
      console.log("Congrats")
      console.log(response)
    },
    error: response => {
      console.log("Sorry")
      console.log(response)
    }
  })
}

关键改动点：

<li data-id="<?php the_ID(); ?>"> 把每条笔记对应的文章 ID 写进 HTML 的 data-* 属性里，前端才有办法知道「刚才点的是哪一条笔记」
deleteNote(e) 和 editNote(e) 的方法签名都补上了事件参数 e——EP091/092 最初写的 deleteNote() 没有参数，这一讲之所以能用 e.target 是因为把参数补上了；转录里作者自己也提到一开始漏加参数导致报错「E is not defined」，是很典型的一处踩坑
$(e.target).parents("li")：e.target 是被点击的具体元素（比如删除图标），.parents("li") 往上找最近的祖先 <li>，从而拿到「这一整条笔记」的容器，再用 .data("id") 读出前面写进去的 data-id（jQuery 的 .data() 方法会自动去掉 data- 前缀，直接传属性名 id 即可）
删除成功的回调里加一行 thisNote.slideUp()，用 jQuery 内建的滑动收起动画把这一条从页面上移除，不需要手动刷新页面或者自己写 DOM 删除逻辑
editNote() 用 jQuery 的 .find() 在当前笔记范围内定位标题输入框和正文文本域，.removeAttr("readonly") 解除只读、.addClass("note-active-field") 加上带动画效果的高亮边框样式，再找到 Save 按钮加上 update-note--visible 让它从隐藏变可见

[截图：前台点击 Delete 按钮后，该笔记从列表里滑动消失的动画效果]

[截图：前台点击 Edit 按钮后，笔记输入框/文本域解除只读、出现高亮边框和 Save 按钮的样子]

Hook / Function 速查

名称	类型	用途
`the_ID()`	WP 内建 function	直接输出（echo）当前循环文章的 ID
`.parents(selector)`	jQuery 方法	从当前元素向上查找匹配选择器的祖先元素
`.data(key)`	jQuery 方法	读取元素的 `data-*` 属性值，不用带 `data-` 前缀
`.removeAttr(name)`	jQuery 方法	移除元素的指定 HTML 属性
`.slideUp()`	jQuery 方法	用滑动收起的动画效果隐藏/移除元素

常见坑

deleteNote / editNote 方法定义时忘记加事件参数 e——events() 里绑定事件时浏览器会自动把事件对象作为第一个参数传进来，但方法定义时如果没写形参接收，方法体内用 e.target 就会报「E is not defined」
wp_create_nonce('wp_rest') 里的下划线容易手滑打成连字符 wp-rest——这是 WordPress 固定的 action 名，必须完全匹配，打错字符验证会一直失败且不容易看出原因
过渡动画 CSS 直接删除而不是注释掉——后面课程做 jQuery-free 版本时还要用回这段 CSS，注释更方便以后原样恢复

延伸 / 后续讲座会用到

下一讲会给 Edit 按钮加上「点击后变成 Cancel 按钮」的交互，点 Cancel 能退出编辑模式（只读属性恢复、高亮边框消失、Save 按钮隐藏）。

Sources

Udemy：

Become a WordPress Developer: Unlocking Power With Code — Section 19, EP094（含 EP093 提醒并入）