無法更改類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函數

回答

相關問題