使用jQuery.on()替代已弃用的.change()后，初始默认值无法隐藏的问题排查

嘿，你碰到的这个问题根源其实很明确——旧代码末尾的.change()不是绑定事件的语法，而是手动触发了一次change事件！

咱们拆解下旧代码的逻辑：

• jQuery(".my_logo").change(function () {...}) 这部分是给下拉框绑定change事件处理函数，当用户切换选项时执行逻辑；
• 后面跟着的.change()是在绑定完成后，立刻手动调用一次这个change事件，让页面刚加载时就执行一遍处理逻辑，从而初始化页面的显示状态（把默认的.title和.logo隐藏，只显示选中项对应的内容）。

而你写的新代码只完成了事件绑定这一步，没有手动触发事件，所以页面加载时根本没跑处理函数，自然原本该隐藏的默认内容就露出来了。

知道原因后修复就很简单了，只需要在绑定事件后，手动触发一次change事件就行，有两种常用写法：

写法一：延续旧习惯用.change()触发 #

jQuery(".my_logo").on('change',function () {
    jQuery(".title").slideUp();
    jQuery(".logo").slideUp();
    var selected_teaser = jQuery(".my_logo option:selected").val();
    jQuery("."+selected_teaser).slideDown();
}).change(); // 保留这个手动触发的调用

写法二：用.trigger('change')触发（更直观，推荐） #

jQuery(".my_logo").on('change',function () {
    jQuery(".title").slideUp();
    jQuery(".logo").slideUp();
    var selected_teaser = jQuery(".my_logo option:selected").val();
    jQuery("."+selected_teaser).slideDown();
}).trigger('change'); // 明确触发change事件，可读性更强

两种写法效果完全一样，选哪个都可以。这样修改后，页面加载时就会自动执行一次事件处理函数，初始化显示状态，和旧代码的功能就完全一致啦。

内容的提问来源于stack exchange，提问作者MAQ Khan