Question

下面是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');
                    }
                });
            }
        });
    }

Answer 1

我认为它会变成这样：

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');
    });
  });
}

如何将 jquery 转换为纯 js？

1 个答案: