如何用普通 Javascript 替换 jQuery change 和 val 方法

Question

购物车包含 jQuery 代码以附加事件处理程序并在外部小部件中设置值：

$(function () { 
  $("#smartpost_select0" ).change(function() {
    var valik = $('#smartpost_select0').val();
    $('.js-transportselect-radio').prop("checked", false);
    if (valik==='-') {
      $('#Field1').val('');
      } else {
      $('#Field1').val('SMARTPOST'+valik);
      $('#Field2').val('SMARTPOST');

   };
    
  });

  });

smartpost_select0 由外部小部件通过外部 Javascript 文件创建。 Field1 和 Field2 是由应用程序创建的输入类型=文本字段。 .js-transportselect-radio class 字段由应用程序创建。

如何更改此代码以删除 jQuery 依赖项？是否有本地方法来附加更改处理程序和切换检查属性?

Answer 1

addEventListener() 是 on() 的原生等价物。 checked 和 value 是 Element 对象的属性，因此不需要 jQuery 的 attr() 或 prop() 等方法。同样，querySelector() 和 querySelectorAll() 允许您使用 CSS 样式的选择器检索 DOM 元素。

document.addEventListener('DOMContentLoaded', () => {
  let field1 = document.querySelector('#Field1');
  let field2 = document.querySelector('#Field2');

  document.querySelector('#smartpost_select0').addEventListener('change', e => {
    document.querySelectorAll('.js-transportselect-radio').forEach(el => el.checked = false);
    
    let valik = e.target.value;
    if (valik === '-') {
      field1.value = '';
    } else {
      field1.value = 'SMARTPOST' + valik;
      field2.value = 'SMARTPOST';
    }
  });
});

为了将来参考，站点 http://youmightnotneedjquery.com 提供了将 jQuery 方法转换为本机 JS 的有用参考。

如何用普通 Javascript 替换 jQuery change 和 val 方法

How to replace jQuery change and val methods with plain Javascript

html

javascript

jquery

css-selectors

dom-events