如何用jQuery为文本元素绑定EventListener实现点击展示信息？

当然可以呀！用jQuery给列表里的人名绑定点击事件完全能实现你要的效果——点击人名后在右侧数据框加载JSON里的艺术品位置描述，我给你梳理下具体实现思路和代码示例：

• 给列表中的每一个人名元素绑定click事件（推荐用jQuery的.on('click')，适配动态生成的列表项）
• 点击时提取当前人名的唯一标识（比如用data-id属性），用来匹配JSON里的对应数据
• 通过jQuery的$.getJSON()方法读取本地JSON文件
• 将匹配到的艺术品位置描述渲染到右侧数据展示框中

1. HTML结构 #

<!-- 左侧人名列表 -->
<ul class="artist-names">
  <li data-artist-id="van-gogh">文森特·梵高</li>
  <li data-artist-id="picasso">巴勃罗·毕加索</li>
  <li data-artist-id="monet">克劳德·莫奈</li>
</ul>

<!-- 右侧数据展示框 -->
<div class="artwork-location-box">
  <!-- 加载的内容会插入到这里 -->
</div>

2. jQuery 逻辑代码 #

$(document).ready(function() {
  // 给列表项绑定点击事件（支持动态生成的列表项）
  $('.artist-names').on('click', 'li', function() {
    // 获取当前点击人名的唯一标识
    const artistId = $(this).data('artist-id');
    
    // 加载JSON文件并处理数据
    $.getJSON('artwork-locations.json', function(artData) {
      // 匹配对应艺术家的艺术品信息
      const targetArtwork = artData.artworks.find(item => item.id === artistId);
      
      // 渲染到右侧数据框
      if (targetArtwork) {
        $('.artwork-location-box').html(`
          <h4>${targetArtwork.artistName}</h4>
          <p><strong>核心作品位置：</strong>${targetArtwork.location}</p>
          <p><strong>位置描述：</strong>${targetArtwork.description}</p>
        `);
      } else {
        $('.artwork-location-box').html('<p>未找到该艺术家的艺术品位置信息</p>');
      }
    }).fail(function() {
      // 处理JSON加载失败的情况
      $('.artwork-location-box').html('<p>艺术品信息加载失败，请检查文件路径后重试</p>');
    });
  });
});

3. 配套JSON文件示例（artwork-locations.json） #

{
  "artworks": [
    {
      "id": "van-gogh",
      "artistName": "文森特·梵高",
      "location": "荷兰阿姆斯特丹梵高博物馆",
      "description": "馆内永久陈列《星月夜》《向日葵》等代表作，同时藏有梵高数百封私人书信与创作手稿"
    },
    {
      "id": "picasso",
      "artistName": "巴勃罗·毕加索",
      "location": "法国巴黎毕加索博物馆",
      "description": "收藏毕加索从蓝色时期到晚期的数千件作品，涵盖绘画、雕塑、版画、陶瓷等多种艺术形式"
    }
  ]
}

• 确保JSON文件的路径正确，要和HTML页面的相对路径匹配
• 如果你的人名列表是动态生成的（比如通过AJAX加载），一定要用事件委托的写法（就是上面代码里$('.artist-names').on('click', 'li', ...)这种形式），不然新添加的列表项不会触发点击事件
• 记得在页面里引入jQuery库，比如在<head>里加上：<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>（或者本地引入下载好的jQuery文件）

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