我想2nd通過引用數組及其索引在行中添加類。我準備好了array剩下的一切，通過參考來添加類index。通過我的工作，效果并不好。我怎樣才能實現它們？謝謝let html = ''html += '<table>';let i = 0;html += '<tr>';for (let d = 0; d < 15; d++) { i = i + 1; html += '<td data-layer=0>' + '<div>' + i + '</div>' + '</td>'}html += '</tr>';for (let w = 0; w < 1; w++) { html += '<tr>'; for (let d = 0; d < 15; d++) { html += '<td class=color></td>' } html += '</tr>';}html += '</table>'document.querySelector('#calendar').innerHTML = html;const arr = [1, 2, 10, 11, 14].map(String);$("td .color") .filter(function() { return $(this).index(arr); }) .addClass('red');td { transition-duration: 0.5s; border: solid black 1px; cursor: pointer;}div { padding: 5px;}table { border-collapse: collapse;}.color{ padding:5px; } .red { background-color: red;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id=calendar></div>
2 回答
尚方寶劍之說
TA貢獻1788條經驗 獲得超4個贊
如果標簽名稱和類引用相同的元素，則兩者之間不應有任何空格。您可以使用它includes()來檢查數組中是否存在索引 + 1 。
嘗試以下方法：
let html = ''
html += '<table>';
let i = 0;
html += '<tr>';
for (let d = 0; d < 15; d++) {
i = i + 1;
html += '<td data-layer=0>' + '<div>' + i + '</div>' + '</td>'
}
html += '</tr>';
for (let w = 0; w < 1; w++) {
html += '<tr>';
for (let d = 0; d < 15; d++) {
html += '<td class=color></td>'
}
html += '</tr>';
}
html += '</table>'
document.querySelector('#calendar').innerHTML = html;
const arr = [1, 2, 10, 11, 14];
$("td.color")
.filter(function() { return arr.includes($(this).index()+1); })
.addClass('red');
td {
transition-duration: 0.5s;
border: solid black 1px;
cursor: pointer;
}
div {
padding: 5px;
}
table {
border-collapse: collapse;
}
.color{
padding:5px;
}
.red {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=calendar></div>
揚帆大魚
TA貢獻1799條經驗 獲得超9個贊
您可以通過首先構建索引來整理一下循環，然后使用反引號來清理 html 模板。
注意：您應該對屬性使用雙引號，例如 class="color"
const columnCount = 15;
const columnIndexes = [...Array(columnCount).keys()]; // make array of indexes
const rowsCount = 1;
const rowIndexes = [...Array(rowsCount).keys()];
const html =
`<table>
<tr>
${columnIndexes.map(c =>
`<td data-layer="0"><div>${c + 1}</div></td>
`)}
</tr>
${rowIndexes.map(r =>
`<tr>
${columnIndexes.map(c =>
`<td class="${r % 2 === 0 ? 'red' : ''}"></td>`
)}
</tr>`
)}
</table>
`
- 2 回答
- 0 關注
- 147 瀏覽
添加回答
舉報
0/150
提交
取消