主页 / 问题 / 899565
Accepted
orel-22
Asked:2020-10-30 01:50:20 +0000 UTC2020-10-30 01:50:20 +0000 UTC

“onclick”处理程序不导航到下一个元素

  • 772

有以下代码，任务是使'onclick'处理程序转到表的下一行。console.log(row) 显示 'row' 变量更改成功，但 'onclick' 保持在同一表行上。怎么修？

$(document).ready(function() {
  //о передвижении по рядам
  var w = 0;
  var row =  $('.row'+w);
  
   row.children().on('click', function(){
       var clicked = $(this); 
       var color = ['green', 'red', 'green'];
       var rand = Math.floor(Math.random() * color.length)
       clicked.css({'backgroundColor' : color[rand]});
       w=w+1;
       row =  $('.row'+w);
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
	<tr class="row0">
		<td class="cell">1-1</td>
		<td class="cell" >1-2</td>
		<td class="cell">1-3</td>
	</tr>
	<tr class="row1">
		<td class="cell1">2-1</td>
		<td class="cell1">2-2</td>
		<td class="cell1">2-3</td>
	</tr>
	<tr class= "row2">
		<td class="cell2">3-1</td>
		<td class="cell2">3-2</td>
		<td class="cell2">3-3</td>
	</tr>
</table>

jquery

1 个回答

  1. Best Answer

    $(document).ready(function() {
  //о передвижении по рядам
  var w = 0;
  var colors = ['green', 'red', 'blue'];

  $("tr[class^='row'] td").on('click', function() {
    if (!$('.row' + w).is($(this).closest("tr")))
      return;

    var index = Math.floor(Math.random() * colors.length)
    $(this).css({ 'backgroundColor': colors[index] });

    w = (w + 1) % 3;
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="row0">
    <td class="cell">1-1</td>
    <td class="cell">1-2</td>
    <td class="cell">1-3</td>
  </tr>
  <tr class="row1">
    <td class="cell1">2-1</td>
    <td class="cell1">2-2</td>
    <td class="cell1">2-3</td>
  </tr>
  <tr class="row2">
    <td class="cell2">3-1</td>
    <td class="cell2">3-2</td>
    <td class="cell2">3-3</td>
  </tr>
</table>

    • 1

相关问题