时间戳

首页 > 解决方案 > jquery如何触发点击具有相同类但不同文本的链接

javascript - jquery如何触发点击具有相同类但不同文本的链接

问题描述

我需要触发表中链接的点击事件。每个链接都有相同的类，但不同的值/文本。

以一个员工表为例，其中包含 ID 和名称两列。第一列包含每个员工 ID 的链接。单击链接时，将显示一个显示相同 ID 的警告框。

假设我有一个文本框，用户将在其中输入 Emp ID。通过点击按钮，会触发表中具有相同Emp ID的链接的点击事件。

注意：我的网络应用程序不仅仅如此。我只需要一种方法来触发每个链接的点击事件并获取其相应的文本。

$(".lnkid").on("click", function() {
  var id = $(this).text();
  alert("Emp. ID: " + id);
});

$("#btntriggerlink").on("click", function() {
  var trigger_id = $("#txtid").val();
  //code to trigger click event goes here
});
.lnk-ref {
  text-decoration: underline;
  cursor: pointer;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <table border="1">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
      </tr>
      <tr>
        <td><a class='lnkid lnk-ref'>1001</a></td>
        <td>Maria Rose</td>
      </tr>
      <tr>
        <td><a class='lnkid lnk-ref'>1002</a></td>
        <td>Adler Brown</td>
      </tr>
      <tr>
        <td><a class='lnkid lnk-ref'>1003</a></td>
        <td>Sonjia Dean</td>
      </tr>
    </thead>
  </table>
  <br> Input Employee Number: <input type="text" id="txtid" />
  <button id="btntriggerlink">Trigger Link Event</button>
</div>

这是一个jsfiddle提前感谢我能得到的任何帮助。:)

标签： javascriptjquery

解决方案

You have two issues in your code. Firstly, the class on the a elements is lnkid, not linkid. Secondly, eq() is used to select an element by its index, whereas you want to select it by its text. To do that you can use filter(), like this:

$(".lnkid").on("click", function() {
  var id = $(this).text();
  alert("Emp. ID: " + id);
});

$("#btntriggerlink").on("click", function() {
  var trigger_id = $("#txtid").val().trim();
  $(".lnkid").filter(function() {
    return $(this).text().trim() == trigger_id;
  }).trigger('click');
});
.lnk-ref {
  text-decoration: underline;
  cursor: pointer;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <table border="1">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
      </tr>
      <tr>
        <td><a class='lnkid lnk-ref'>1001</a></td>
        <td>Maria Rose</td>
      </tr>
      <tr>
        <td><a class='lnkid lnk-ref'>1002</a></td>
        <td>Adler Brown</td>
      </tr>
      <tr>
        <td><a class='lnkid lnk-ref'>1003</a></td>
        <td>Sonjia Dean</td>
      </tr>
    </thead>
  </table>
  <br> Input Employee Number: <input type="text" id="txtid" />
  <button id="btntriggerlink">Trigger Link Event</button>
</div>

An alternative to filter() is :contains, but note that the latter will hit on any element which contains the text in any location, eg: Foo 1001 bar. filter() requires an exact match.

推荐阅读