【发布时间】:2021-05-28 07:34:01
【问题描述】:
是否有可能为数组的每个元素单独切换文本()?
现在,当单击时,每个元素的值都会同时更改,我想在单击时一个一个地检查它们。
$(function() {
var jap = ["kau", "matsu", "shiru"];
var eng = ["to buy", "to wait", "to know"];
var tds = [$('#td1'), $('#td2'), $('#td3')]
for (i = 0; i < tds.length; i++) {
$(tds[i]).on('click', function(){
for(i = 0; i < tds.length; i++) {
$(tds[i]).toggleText(jap[i], eng[i]);
}
});
}
});
理想情况下,我想在每次单击每个数组元素时更改表格单元格内的文本。
--编辑:
这是带有表格的 HTML:
<table>
<tbody id="tb">
<tr>
<td>Godan Verbs</td>
<td>V2</td>
<td>Ichidan Verbs</td>
<td>V2</td>
<td>Irregular Verbs</td>
<td>V2</td>
</tr>
<tr>
<td>kau</td>
<td>kai-</td>
<td>taberu</td>
<td>tabe-</td>
<td>kuru</td>
<td>ki-</td>
<tr>
<td>matsu</td>
<td>machi-</td>
<td>miru</td>
<td>mi-</td>
<td>suru</td>
<td>shi-</td>
</tr>
<tr>
<td>shiru</td>
<td>shiri-</td>
<td>oshieru</td>
<td>oshie-</td>
</tr>
<tr>
<td>kaku</td>
<td>kaki-</td>
<td>neru</td>
<td>ne-</td>
</tr>
<tr>
<td>oyogu</td>
<td>oyogi-</td>
<td>kangaeru</td>
<td>kangae-</td>
</tr>
<tr>
<td>hanasu</td>
<td>hanashi-</td>
<td>okiru</td>
<td>oki-</td>
</tr>
<tr>
<td>shinu</td>
<td>shini-</td>
<td>sakeru</td>
<td>sake-</td>
</tr>
<tr>
<td>yomu</td>
<td>yomi-</td>
<td>kotaeru</td>
<td>kotae-</td>
</tr>
<tr>
<td>asobu</td>
<td>asobi-</td>
<td>iru</td>
<td>i-</td>
</tr>
</tbody>
</table>
这是我想显示的单词的其他含义:
const jap2en = {"kau":"to buy", "matsu":"to wait", "shiru":"to know", "kaku":"to write", "oyogu":"to swim", "hanasu":"to talk", "shinu":"to die", "yomu":"to read", "asobu":"to play", "taberu": "to eat", "miru": "to look", "oshieru": "to teach", "neru": "to sleep", "kangaeru": "to think", "okiru": "to get up", "sakeru": "to avoid", "kotaeru": "to answer", "iru": "to be/exist", "kuru": "to come", "suru": "to do"};
我还在 td 中添加了 id,它们应该为每个单独的 td 显示如下含义:
<td id="td1">kau</td>
<td>kai-</td>
<td id="td2">taberu</td>
// and so on
把js代码改成这样:
const $tds = $("#tb td[id]");
$("#tb").on("click", "td[id]", function() { ... }
然而,正如我在评论中提到的,一个片段改变了表格的结构,使 tds 出现在错误的位置。这个片段具体来说:
$tds.each(function(i) {
$(this).text(jpArr[i])
$(this).data("lang","ja")
})
如果删除,代码可以工作,但单元格需要单击两次才能显示含义。
【问题讨论】:
-
您可能想看看jQuery Learning Center,因为您的设置过于复杂。如果你采用 jQuery 方式,你的问题也将得到解决。