如何将指定jQuery代码转换为原生JavaScript？

嘿，我来帮你搞定这两个jQuery转原生JS的问题，一步一步说清楚～

1. 单独转换$('#' + $(this).val()).show() #

先拆解这段jQuery代码的逻辑：

• $(this).val()：获取触发事件的元素的value值
• $('#' + ...)：通过id选中对应的元素
• .show()：让元素显示（恢复其默认的display属性，或者设置为block）

对应的原生JavaScript代码可以写成：

document.getElementById(this.value).style.display = 'block';

或者如果想要更贴近jQuery的.show()行为（即恢复元素原本的display值，而不是强制设为block），可以写成：

document.getElementById(this.value).style.display = '';

解释下细节：

• 在事件处理函数里，this直接指向触发事件的DOM元素，所以可以直接用this.value获取值，不用像jQuery那样包一层$(this)
• document.getElementById()是原生JS中通过id选择元素最直接的方法，比querySelector('#xxx')性能更好

2. 完整转换jQuery的change事件代码 #

你的原生代码已经完成了一部分，但有两个小问题需要修正，同时补全最后一行：
首先看原jQuery代码的完整逻辑：

$('#optionselector').change(function(){ $('.option-type').hide(); $('#' + $(this).val()).show(); });

它的作用是：当optionselector元素的选中值变化时，先隐藏所有.option-type的元素，再显示id等于当前选中值的元素。

修正并补全后的完整原生代码 #

function addEventHandler(elem, eventType, handler) {
  if (elem.addEventListener)
    elem.addEventListener(eventType, handler, false);
  else if (elem.attachEvent)
    elem.attachEvent('on' + eventType, handler);
}

addEventHandler(document, 'DOMContentLoaded', function() {
  addEventHandler(document.getElementById('optionselector'), 'change', function() {
    // 替换$('.option-type').hide()：选中所有.option-type元素并隐藏
    const optionTypeElements = document.querySelectorAll('.option-type');
    optionTypeElements.forEach(function(el) {
      el.style.display = 'none';
    });
    
    // 补全最后一行：显示对应id的元素
    const targetElementId = this.value;
    const targetElement = document.getElementById(targetElementId);
    if (targetElement) { // 增加判断避免找不到元素时报错
      targetElement.style.display = 'block';
      // 若要恢复默认display，替换为：targetElement.style.display = '';
    }
  });
});

关键修正点说明： #

• 你原来用的document.querySelector('.option-type')只会选中第一个匹配的元素，而jQuery的$('.option-type')会选中所有匹配元素，所以要改成document.querySelectorAll('.option-type')，然后遍历每个元素设置隐藏
• 补全的最后一行逻辑和第一个问题一致，同时加了if (targetElement)的判断，防止当选中值对应的id不存在时出现JS报错，让代码更健壮

简化版（现代浏览器兼容） #

如果不需要兼容IE8及以下的老旧浏览器，可以去掉兼容的事件绑定函数，代码会更简洁：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('optionselector').addEventListener('change', function() {
    // 隐藏所有.option-type元素
    document.querySelectorAll('.option-type').forEach(el => el.style.display = 'none');
    // 显示目标元素
    const target = document.getElementById(this.value);
    if (target) target.style.display = 'block';
  });
});

内容的提问来源于stack exchange，提问作者1878castle