在图像按钮上的 <a> 标签中获取文本 单击

Question

<td style="float:right;padding-top:5px">
   <a class="testAccId">#:AccountID#</a>                                                                   
   <img id="imgbtn" class="clsimg" onclick="history(event)" src="../Content/images/history.png" />                                 
</td>

我有一个锚标记和一个图像按钮，单击图像按钮时我需要该锚标记中的文本，并且 'td' 在循环中，所以如果我有 2 个项目，则单击一个第一个图块中的 img，我应该从第一个图块中获取文本。

我尝试了以下选项。

 function history(e) {
        var a = $(this).closest('td').next().find('.testAccId').text();
        alert(a);
    }


 function history(e) {

    var a= ($(".imgbtn").closest(".testAccId")).text();
    alert(a);
}

function history(e) {
        var a = $(e.currentTarget).closest('td').next().find('.testAccId').text();
        alert(a);
    }

在警报中，我得到的是空对象或对象对象。

请帮我解决这个问题。

Answer 1

也许你可以尝试类似的东西，很难说出一个例子w/o，但只要结构一致，这应该可以工作

function history(e) {
 var a = ($(e.target).prev().html());
  alert(a)
}

我也在这里更新了代码，现在应该可以使用了^^

Answer 2

你可以匹配最近的元素

 function history(e) {

var a= ($(".imgbtn").closest($('.testAccId')).text();
    alert(a);
}

Answer 3

通过删除内联 JS 并使用更好的点击事件以及 .closest() 和 .find()

的组合

$(".clsimg").on("click", function() {
  var aText = $(this).closest("td").find("a").text();
  alert(aText);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>
      <a class="testAccId">#:AccountID#</a>
      <img id="imgbtn" class="clsimg" src="//placehold.it/50x50" alt="Desc">
    </td>
  </tr>
</table>

Answer 4

另一个选项：
PS：确保在头部部分包含 Jquery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
        $(".clsimg").click(function(){
            alert($(this).parent('td').find('a').text());
        });
    });
</script>

Answer 5

A和IMG是children同一个parent，他们是兄妹，所以大家需要的是：

$('.clsimg').click(function() {
    alert($(this).siblings('a').text());
});

JSFiddle working demo