如何将元素对象作为参数发送到没有ID的javascript函数

Question

在函数ClickedRow中，我想使用被点击的“a”。 所以我希望将其作为参数接收。

<td ...... >
<span class="......>
  <span onmousedown="event.cancelBubble = true">
      <a class="GridLinkRenderer" href="javascript:ClickedRow(this)"  onclicklink="javascript:ClickedRow(this)" urlText="XXXX">

<td ......
<span class="......>
  <span onmousedown="event.cancelBubble = true">
      <a class="GridLinkRenderer" href="javascript:ClickedRow(this)"  onclicklink="javascript:ClickedRow(this)" urlText="XXXXX">

基于点击<a ....>我想隐藏/显示它（或显示/隐藏接下来<a class= "GridLinkRenderer"其他<td ...> ）的功能ClickedRow（本）。 我该怎么做 ？

我试图发送点击的$（行）.next（）。eq（0）.tagName和row.style.display = 'none' ，它表示它是“未定义的”。

function ClickedRow(row){

$(row).next().eq(0).hide();
$(row).hide();


}

Answer 1

而不是这个，删除href并使用

$('#TheidOfTheA').on('click'function(){
let myAElement = $(this);
}

Answer 2

你看过nearest（），find（）和next（）吗？

• https://api.jquery.com/closest/
• https://api.jquery.com/next/

• https://api.jquery.com/find/

  $（行）.closest（ 'TD'）。接下来（ 'TD'）。找到（ 'GridLinkRenderer'）

没有测试过这个...但是如果我正确的话，这至少应该指向正确的方向。

Answer 3

我不知道OP是否在tr中使用了td而在表中使用了tr它应该这样我只是快速地提到它是无效的HTML应该有没有tr作为父级的任何td它是无效的HTML有一个没有表作为其祖先的tr。

如果从嵌套在td中的标签开始，您需要爬出 ：

$(this).closest('td')...

一旦进入细胞水平，环顾四周左边的细胞： ....prev('td') ，或右边： ....next('td')或两者： ....siblings('td') 。 然后沿着每个td 向下找到嵌套在其中的链接并将其关闭/打开： ....find('.gLR').fadeToggle();

$(this).closest('td').siblings('td').find('.gLR').fadeToggle();

 $('.gLR').not('.g5').hide(); $('.gLR').on('click', function(e) { if ($(this).hasClass('g5')) { $('.gDir').fadeToggle(); } else if ($(this).hasClass('g1') || $(this).hasClass('g9')) { const cell = $(this).closest('td'); cell.siblings('td').find('.gLR').fadeToggle(); } else if ($(this).hasClass('g4')) { $(this).closest('td').prev('td').find('.gLR').fadeToggle(); } else if ($(this).hasClass('g6')) { $(this).closest('td').next('td').find('.gLR').fadeToggle(); } else { return false; } }); 

 :root { font: 700 5vw/1.5 Consolas } table { table-layout: fixed; border-collapse: collapse; } td { width: 20%; text-align: center } a { display: block; height: 10vh; text-decoration: none; color: cyan; } a:hover { color: tomato; } a.g5:hover { font-size: 0; } a.g5:hover::after { content: '\\1f536'; font-size: 5vw; } td b { display: block; height: 10vh; } 

 <table> <tr class='gRA'> <td colspan='2'> <b><a href='#/' class="gLR g0">🌈</a></b> </td> <td><b><a href='#/' class="gLR gDir g1">⮝</a></b></td> <td colspan='2'> <b><a href='#/' class="gLR g2">🦄</a></b> </td> </tr> <tr class='gRB'> <td><b><a href='#/' class="gLR g3">🏰</a></b></td> <td><b><a href='#/' class="gLR gDir g4">⮜</a></b></td> <td><b><a href='#/' class="gLR g5">🔷</a></b></td> <td><b><a href='#/' class="gLR gDir g6">⮞</a></b></td> <td><b><a href='#/' class="gLR g7">🏯</a></b></td> </tr> <tr class='gRC'> <td colspan='2'> <b><a href='#/' class="gLR g8">🔥</a></b> </td> <td><b><a href='#/' class="gLR gDir g9">⮟</a></b></td> <td colspan='2'> <b><a href='#/' class="gLR g10">💀</a></b> </td> </tr> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 4

我尝试了两个推荐（thx for it） - 没有成功。
看起来“this”参数不像clicked元素（对象）引用那样传递。

参数“row”似乎就像所有对象的父类一样，所以就像新的Object而不是被点击的对象一样。

我不确定是否href="javascript:ClickedRow(this)" onclicklink="javascript:ClickedRow(this)"是正确的语法。

Answer 5

所以复制了你的样本并想出了这个。 ;）尝试这一点..并确保你了解这里发生了什么。

$(() => {
            $("body").on("click",".GridLinkRenderer", (e) => {
                e.preventDefault();
                //works on the first link.. stil misses a few check.. 
                //for example do we have the next td.. at all.. 
                console.log($(e.currentTarget).closest('td').next('td').find('.GridLinkRenderer'));
            })
        });