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 ....>，我想通过功能ClickedRow（this）隐藏/显示它（或显示/隐藏其他<a class= "GridLinkRenderer"中的下一个<td ...>）。我该怎么做？

我尝试发送单击的$（row）.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

您是否看过最近的（），查找（）和下一步（）？

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

$（row）.closest（'td'）。next（'td'）。find（'。GridLinkRenderer'）

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

Answer 3

我无法通过OP判断td是否在tr中使用，并且tr是否在表中使用tr，因此我只想简单地提到一下，如果有任何不带tr的td，则它是无效的HTML。父级，并且它是无效的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

我尝试了两个建议（对此表示感谢）-没有成功。
看起来“ this”参数没有像单击的element（object）引用那样传递。

参数“ row”似乎像所有对象的父对象，所以像新对象，而不是单击对象。

我不确定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'));
            })
        });

如何在没有ID的情况下将元素对象作为参数发送给javascript函数

5 个答案: