Question

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

例如，一个雇员表，其中有两列用于ID和Name。第一列包含每个员工ID的链接。单击链接后，它将显示一个警告框，显示相同的ID。

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

注意：我的Web应用程序还具有更多功能。我只需要一种方法即可触发每个链接的click事件并获取其相应的文本。

$(".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 在此先感谢您能获得的任何帮助。：）

Answer 1

您的代码中有两个问题。首先，a元素上的类是lnkid，而不是linkid。其次，eq()用于通过元素的索引选择元素，而您想通过其文本选择元素。为此，您可以使用filter()，如下所示：

$(".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>

filter()的替代方法是:contains，但请注意，后者将命中包含任意位置文本的任何元素，例如：Foo 1001 bar。 filter()需要完全匹配。

jQuery如何触发单击具有相同类但不同文本的链接

1 个答案: