[英]How can I apply hover event for multiple elements at the same time?
我對 JavaScript 非常陌生,希望為每一行分組表數據。 每行有6個表數據。 我希望前 3 個鏈接在一起,后 3 個分開。 為我想要鏈接在一起的列創建一個 className 會使所有表懸停。 我只希望特定的行值可以懸停。
var table = document.getElementsByTagName("tbody");
for (var i = 0; i < table.length-1; i++){
var currentTable = table[i];
var rows = currentTable.getElementsByTagName("tr");
for(var j = 3; j < rows.length-1; j++){
var c = rows[j].cells;
c[0].className = "fall";
c[1].className = "fall";
c[2].className = "fall";
// for each row make these three selectable
c[3].className = "spring";
c[4].className = "spring";
c[5].className = "spring";
}
}
除了為每一行創建一個新的類名之外,我不確定是否有更好的方法來做到這一點。 如果我需要這樣做,有沒有一種簡單的方法可以動態地做到這一點? 如果您想查看實際表,請告訴我。 謝謝你。
當然,您可以使用 CSS 通過基於索引對它們進行分類來做到這一點:
td:nth-child(1), td:nth-child(2), td:nth-child(3) { color: red; } td:nth-child(4), td:nth-child(5), td:nth-child(6) { color: green; }
<table> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> <tr> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> </tr> </tbody> </table>
參考: :nth-child()
更新:
$('td:nth-child(1),td:nth-child(2),td:nth-child(3)').on('mouseover', function () { var index = $(this).index() + 1; $('table td:nth-child(' + index + ')').css('color', 'red'); }); $('td:nth-child(1),td:nth-child(2),td:nth-child(3)').on('mouseout', function () { var index = $(this).index() + 1; $('table td:nth-child(' + index + ')').css('color', 'black'); }); $('td:nth-child(4),td:nth-child(5),td:nth-child(6)').on('mouseover', function () { var index = $(this).index() + 1; $('table td:nth-child(' + index + ')').css('color', 'green'); }); $('td:nth-child(4),td:nth-child(5),td:nth-child(6)').on('mouseout', function () { var index = $(this).index() + 1; $('table td:nth-child(' + index + ')').css('color', 'black'); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h3>Table 1</h3> <table> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> </tbody> </table> <h3>Table 2</h3> <table> <tbody> <tr> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> </tr> </tbody> </table>
更新 2:
$('td:nth-child(1),td:nth-child(2),td:nth-child(3)').on('mouseover', function () { $('td:nth-child(1),td:nth-child(2),td:nth-child(3)').css('color', 'red'); }); $('td:nth-child(1),td:nth-child(2),td:nth-child(3)').on('mouseout', function () { $('td:nth-child(1),td:nth-child(2),td:nth-child(3)').css('color', 'black'); }); $('td:nth-child(4),td:nth-child(5),td:nth-child(6)').on('mouseover', function () { $('td:nth-child(4),td:nth-child(5),td:nth-child(6)').css('color', 'green'); }); $('td:nth-child(4),td:nth-child(5),td:nth-child(6)').on('mouseout', function () { $('td:nth-child(4),td:nth-child(5),td:nth-child(6)').css('color', 'black'); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h3>Table 1</h3> <table> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> </tbody> </table> <h3>Table 2</h3> <table> <tbody> <tr> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> </tr> </tbody> </table>
或者,如果您只想在 1 行上使用該事件,則可以將該事件編輯為:
$('td:nth-child(1),td:nth-child(2),td:nth-child(3)').on('mouseover', function () {
$(this).parent().find('td:nth-child(1),td:nth-child(2),td:nth-child(3)').css('color', 'red');
});
更新 3:
$('td').on('mouseover', function () { var tr = $(this).parent(); var index = $(this).index(); var cells = index < 3 ? [1, 2, 3] : [4, 5, 6]; var color = index < 3 ? 'red' : 'green'; cells.forEach(function (x) { tr.find('td:nth-child(' + x + ')').css('color', color); }); }); $('td').on('mouseout', function () { $(this).parent().find('td').css('color', 'black'); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h3>Table 1</h3> <table> <thead> <tr> <th>H1</th> <th>H2</th> <th>H3</th> <th>H4</th> <th>H5</th> <th>H6</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> </tbody> </table> <h3>Table 2</h3> <table> <thead> <tr> <th>H1</th> <th>H2</th> <th>H3</th> <th>H4</th> <th>H5</th> <th>H6</th> </tr> </thead> <tbody> <tr> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> </tr> </tbody> </table>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.