如何將元素對象作為參數發送到沒有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'));
            })
        });