Как отправить объект элемента в качестве параметра в функцию JavaScript без идентификатора - PullRequest
Новая
       17

Как отправить объект элемента в качестве параметра в функцию JavaScript без идентификатора

0 голосов
/ 29 мая 2019

В функции 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 (это).Как мне это сделать ?

Я пытался отправить нажатыми $ (row) .next (). Eq (0) .tagName и row.style.display = 'none', он говорит, что он «неопределен».

function ClickedRow(row){

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


}

Ответы [ 5 ]

0 голосов
/ 30 мая 2019

так скопировал Ваш образец и придумал это. ;) попробуй это .. и убедитесь, что вы понимаете, что здесь происходит. 

$(() => {
            $("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'));
            })
        });
0 голосов
/ 29 мая 2019

Я испробовал обе рекомендации (спасибо за это) - безуспешно.
Похоже, что аргумент "this" не передается как ссылка на элемент (объект), по которому щелкнули.

Параметр "строка" выглядит как родительский объект для всего объекта, как новый объект, а не объект, по которому щелкнули.

Я не уверен, правильный ли синтаксис href="javascript:ClickedRow(this)" onclicklink="javascript:ClickedRow(this)".

0 голосов
/ 29 мая 2019

вы смотрели на closest (), find () и next ()?

не проверял это ... но если я думаю правильно, это должно быть, по крайней мере, точка в правильном направлении.

0 голосов
/ 29 мая 2019

По OP я не могу сказать, используются ли td в tr и tr в таблице, как следует, поэтому я просто очень быстро упомяну, что это недействительный HTML, если в качестве td должен быть любой td без tr parent и недопустимый HTML-код, в качестве предка которого указан tr без таблицы.

Если вы начинаете с тега, вложенного в td, вам нужно выбраться : 

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

Оказавшись на уровне ячеек, осмотрите ячейки слева: ....prev('td') или направо: ....next('td') или оба: ....siblings('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>
0 голосов
/ 29 мая 2019

Вместо этого удалите href и используйте 

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