如何在jQuery的点击事件中获取当前点击标签的文本值并实现页面跳转

问题根源 #

你遇到的问题核心是HTML中id属性必须唯一——当多个元素共用同一个id="search"时，jQuery的$("#search")只会匹配DOM中第一个带该id的元素，所以不管点击哪个标签，拿到的都是第一个标签的文本内容。

修正方案 #

我们需要做两个关键改动来解决这个问题：

1. 修正HTML结构：把重复的id改为class

将所有标签的id="search"替换成class="search-tag"，同时移除内联的onclick事件（推荐用jQuery绑定事件，代码更易维护）：

<div class="ui labels">
 <div class="ui basic large label search-tag" style="cursor: pointer">aerial</div>
 <div class="ui basic large label search-tag" style="cursor: pointer">architecture</div>
 <div class="ui basic large label search-tag" style="cursor: pointer">background</div>
 <div class="ui basic large label search-tag" style="cursor: pointer">blue</div>
 <div class="ui basic large label search-tag" style="cursor: pointer">board</div>
 <div class="ui basic large label search-tag" style="cursor: pointer">view</div>
</div>

2. 重写jQuery事件处理逻辑

通过jQuery给所有.search-tag类的元素绑定点击事件，在事件处理函数中精准获取当前点击元素的文本值，再拼接URL完成跳转：

<script>
$(document).ready(function() {
  // 给所有搜索标签绑定点击事件
  $('.search-tag').on('click', function() {
    const baseUrl = "/content/myproject/en/home/asset-library.html?fulltext=";
    // 获取当前点击标签的文本（trim()去除多余空格）
    const tagText = $(this).text().trim();
    // 拼接完整URL并跳转
    window.open(baseUrl + tagText, "_self");
  });
});
</script>

改动说明 #

• 替换id为class：保证HTML结构符合规范，class专门用于标识一组具有相同行为的元素。
• 使用jQuery事件绑定：相比内联onclick，这种方式更符合「分离关注点」的原则，代码逻辑更清晰、易维护。
• 使用$(this)：在事件处理函数中，this指向当前被点击的元素，通过$(this)可以准确获取该元素的文本内容，彻底解决了之前只能取第一个元素的问题。

如果坚持要保留内联onclick的写法（不推荐），也可以修改函数让它接收当前元素作为参数：

<!-- 修改后的HTML -->
<div class="ui labels">
 <div class="ui basic large label" onclick="pageRedirect(this)" style="cursor: pointer">aerial</div>
 <div class="ui basic large label" onclick="pageRedirect(this)" style="cursor: pointer">architecture</div>
 <!-- 其他标签同理 -->
</div>

<!-- 修改后的JS -->
<script>
function pageRedirect(element) {
  const str1 = "/content/myproject/en/home/asset-library.html?fulltext=";
  const getval = $(element).text().trim();
  const res = str1.concat(getval);
  window.open(res, "_self");
}
</script>

不过还是推荐第一种jQuery事件绑定的写法，更符合现代前端开发的最佳实践。

内容的提问来源于stack exchange，提问作者Niraj Kumar Singh