javascript - 如何将jquery转换为纯js?
问题描述
下面是jquery编码。我会将代码转换为纯 javascript。如何将其转换为纯 JavaScript?如何将其转换为纯 JavaScript?
$('#tbl_W_CACTUS_1 tr').not(':last').each(function() {
if (!this.classList.contains('displayNone')) {
this.classList.add('displayNone');
}
});
//Hide all link first
$('a[id^="cactus_listing_sso_"]').each(function() {
this.classList.add('displayNone');
});
if (typeof chkbox != 'undefined') {
$('input[type="checkbox"][name^="chkbx_cactus_"]').each(function() {
if (this != chkbox) {
this.checked = false;
}
});
}
if (document.getElementById('W_CACTUS_1_agad') && $('input[type="checkbox"]
[name^="chkbx_cactus_"]').length > 0) {
$('input[type="checkbox"][name^="chkbx_cactus_"]').each(function() {
if (this.checked) {
var agency_group = "agadgroup_" + document.getElementById('W_CACTUS_1_agad').value +
"_" + this.value;
$('#tbl_W_CACTUS_1 tr[agad_group="' + agency_group + '"]').each(function() {
if (this.classList.contains('displayNone')) {
this.classList.remove('displayNone');
}
});
}
});
}
解决方案
我认为它会变成这样:
document.querySelectorAll('#tbl_W_CACTUS_1 tr:not(:last-child)').forEach(tr => {
tr.classList.add('displayNone');
});
//Hide all link first
document.querySelectorAll('a[id^="cactus_listing_sso_"]').forEach((element) => {
element.classList.add('displayNone');
});
if (typeof chkbox != 'undefined') {
document.querySelectorAll('input[type="checkbox"][name^="chkbx_cactus_"]').forEach((element) => {
if (element != chkbox) {
element.checked = false;
}
});
}
const cactusAgad = document.getElementById('W_CACTUS_1_agad');
const checkboxes = document.querySelectorAll('input[type="checkbox"][name^="chkbx_cactus_"]')
if (cactusAgad && checkboxes.length > 0) {
checkboxes.forEach(({ checked, value }) => {
if (!checked) {
return;
}
const agencyGroup = `agadgroup_${cactusAgad.value}_${value}`;
const trs = document.querySelectorAll(`#tbl_W_CACTUS_1 tr[agad_group="${agencyGroup}"]`);
trs.forEach((tr) => {
tr.classList.remove('displayNone');
});
});
}
推荐阅读
- javascript - 使用 $set 后 VueJS 不更新视图
- cmake - 在发布模式下,无法在 CMake 中将 /MD 替换为 /MT
- html - Bootstrap 4:在网格单元格内右对齐内容
- android - Android P:UsageStatsManager getAppStandbyBucket
- python - 数据框合并列操作
- python - 从 python 控制台执行时,Gevent start() 方法不会启动新线程
- batch-file - 将文件上传到 SharePoint 的批处理文件(通过提供登录详细信息)
- swisscomdev - 服务代理错误:尝试解除绑定服务时发生内部服务器错误
- azure - 多租户环境中的逻辑应用
- jquery - 从第一次按键开始 jquery Validate