Вызов функции onClick JavaScript [дубликат]

143

17 июня 2019, 10:20

На данный вопрос уже ответили:

Асинхроность между двумя дивами на js? 1 ответ

Имеется 2 таблицы 3 х 3. При клике на какой-либо элемент во второй таблице, он становится прозрачным. Помогите написать функцию, которая при нажатии ячейки в первой таблице делает непрозрачным аналогичный элемент из другой таблицы

P.s все элементы во второй таблице присвоены одному классу

P.s. Если не сложно, объясните, пожалуйста, как это будет работать, или скиньте ссылку, где об этом можно досконально почитать.

Заранее спасибо!

<table> 
  <tr> 
    <td onClick="secondTable.style.opacity='1';"> 1 </td> 
    <td onClick="secondTable.style.opacity='1';"> 2 </td> 
    <td onClick="secondTable.style.opacity='1';"> 3 </td> 
  </tr> 
</table> 
<table> 
  <tr> 
    <td class="secondTable">1</td> 
    <td class="secondTable">2</td> 
    <td class="secondTable">3</td> 
  </tr> 
</table>

Answer 1

Нужно задать аналогичным элементам двух таблиц одинаковые классы (я задал .one, .two, .three) и при клике на элемент из первой таблицы проверять, есть ли такой класс у элемента второй таблицы, и делать его непрозрачным:

$('.secondTable').click(function(){ 
  $(this).css('opacity', '0') 
}) 
 
$('.firstTable').click(function(){ 
  if($(this).hasClass('one')) { 
    $('.secondTable.one').css('opacity', '1'); 
  } 
  else if($(this).hasClass('two')) { 
    $('.secondTable.two').css('opacity', '1'); 
  } 
  else if($(this).hasClass('three')) { 
    $('.secondTable.three').css('opacity', '1'); 
  } 
})

table { 
  border-collapse: collapse; 
} 
table td { 
  border :1px solid black; 
  padding: 10px; 
  transition: .5s; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<table> 
  <tr> 
    <td class="firstTable one">1</td> 
    <td class="firstTable two">2</td> 
    <td class="firstTable three">3</td> 
  </tr> 
</table> 
<br /> 
<table> 
  <tr> 
    <td class="secondTable one">1</td> 
    <td class="secondTable two">2</td> 
    <td class="secondTable three">3</td> 
  </tr> 
</table>

Answer 2

Я сделал бы так:

document.getElementById('t2').addEventListener('click', function(e) { 
  if (e.target.tagName === 'TD') { 
    e.target.classList.toggle('transparent'); 
  } 
}); 
 
document.getElementById('t1').addEventListener('click', function(e) { 
  if (e.target.tagName === 'TD') { 
    let r = e.target.parentElement.rowIndex; 
    let c = e.target.cellIndex; 
 
    document.getElementById('t2').rows[r].cells[c].classList.remove('transparent'); 
  } 
});

table { 
  border-collapse: collapse; 
} 
 
table td { 
  border: 1px solid black; 
  padding: 10px; 
  transition: .5s; 
} 
 
.transparent { 
  opacity: 0; 
}

<table id="t1"> 
  <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr> 
  <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr> 
  <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr> 
</table> 
<br /> 
<table id="t2"> 
  <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr> 
  <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr> 
  <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr> 
</table>