如何使用jQuery点击a标签获取id后匹配JSON内容插入指定DOM节点

HTML 结构 #

直接使用你现有的标签即可，参考完整结构如下：

<a href="#" id="12345">title 1</a>
<a href="#" id="67890">title 2</a>
<div class="content"></div>

JavaScript 逻辑 #

// 你的JSON数据，异步获取的话可替换为接口返回值
const data = {
  entry: [{
    id: {
      $t: "post-12345"
    },
    content: {
      type: "html",
      $t: "content 1",
    }
  }, {
    id: {
      $t: "post-67890"
    },
    content: {
      type: "html",
      $t: "content 2",
    }
  }]
}

// 绑定所有a标签的点击事件
document.querySelectorAll('a').forEach(a => {
  a.addEventListener('click', function(e) {
    // 阻止a标签默认跳转顶部的行为
    e.preventDefault()
    // 获取当前点击元素的id属性
    const currentAId = this.getAttribute('id')
    // 拼接成entry数组中对应的id格式
    const targetMatchId = `post-${currentAId}`
    // 查找匹配的条目
    const matchedItem = data.entry.find(item => item.id.$t === targetMatchId)
    if(matchedItem){
      // 追加内容用这行
      document.querySelector('.content').innerHTML += matchedItem.content.$t
      // 每次点击替换原有内容用下面这行
      // document.querySelector('.content').innerHTML = matchedItem.content.$t
    }
  })
})

注意：如果你的JSON数据是通过接口异步获取的，需要确保绑定点击事件的逻辑在数据返回之后执行，否则会因找不到data.entry报错。

内容的提问来源于stack exchange，提问作者will rodriguez