无法更改类jQuery函数

我有这样的功能：无法更改类jQuery函数

$('.circleShape').click(function(){ 
    var colno = $(this).attr('class').substring(25, 30); 
    for (var i = (cols-1); i >=0 ; i--) { //cols is a number of columns on the board 
     if ($(colno).eq(i).hasClass('circleInitial')) { 
     alert('old color'); 
     $(colno).eq(i).removeClass('circleInitial').addClass('circlePlayerOne'); 
     break; 
     } 
    } 
    });

如果单击列的任何元素，我想改变类中的最低元素中有不一样的列被改变了。但$（colno）语句无法获取必要的元素。我怎样才能实现这个？我在三天前开始学习JS和jQuery，所以我无法弄清楚自己。这是身体的HTML内容

<body> 
    <div class="container"> 
     <div class="jumbotron"> 
     <h2>Welcome to Connect Four!</h1> 
     <h3>The object of this game is to connect four of your chips in a row!</h3> 

     </div> 
    </div> 
    <table id='board'> 

    </table> 
    <script src='js/jquery-3.2.1.js'></script> 
    <script src='js/connect_four.js'></script> 
    </body>

其实，我生成表这种方式：

function initBoard(){ 
    var chip = "<td class='chip'><div class='circleShape circleInitial'> </div></td>"; 
    var chips = Array(cols).fill(chip); 
    chips = "<tr>" + chips + "/tr"; 
    $('#board').html(Array(rows).fill(chips)); 
    for (var i = 0; i < chipsTotal; i++) { 
    var col='col' + (i%cols).toString(); 
    var row='row' + (~~(i/cols)).toString() 
    $('.chip > div').eq(i).addClass(col).addClass(row); 
    };

来源

2017-04-16 Mikhail Belousov

也粘贴您的HTML。 –

请添加您的HTML标记。如果你可以创建一个工作代码片段，那就更好了。或JSFiddle –

始终怀疑您的选择器。检查他们通过运行'$（selector）.length'返回你认为他们做的元素 - 如果它是0，那是你的问题;元素，因为你的目标是不存在的。 'colno'似乎是一个字符串，所以将它传递给'$（）'似乎是可疑的。 – Utkanos

查找点击td的指数和tbody的最后一排。然后将最后一行中tr的索引与找到的索引进行匹配。

$("td").click(function(){ 
 
var index = $(this).index(); 
 
var lastRow = $(this).closest('tbody').find('tr').last(); 
 
var colEnd = lastRow.find('td').eq(index); 
 
console.log(colEnd.text()); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>Demo 1</td> 
 
     <td>Demo 2</td> 
 
     <td>Demo 3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Demo 4</td> 
 
     <td>Demo 5</td> 
 
     <td>Demo 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Demo 7</td> 
 
     <td>Demo 8</td> 
 
     <td>Demo 9</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Demo 10</td> 
 
     <td>Demo 11</td> 
 
     <td>Demo 12</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Demo 13</td> 
 
     <td>Demo 14</td> 
 
     <td>Demo 15</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

在你的情况写在.circleShape点击上面的过程中提供的呈现的HTML具有相似的结构。

$("table#board").on("click", ".circleShape", (function(){ 
var index = $(this).index(); 
var lastRow = $(this).closest('tbody').find('tr').last(); 
var colEnd = lastRow.find('td').eq(index); 
colEnd.removeClass('circleInitial').addClass('circlePlayerOne'); 
})

来源

2017-04-16 13:05:02

如果您可以发布生成的HTML结构，可能会有更多的帮助。 –

'这样 –

更新了答案。 –

无法更改类jQuery函数

回答

相关问题