在页面开发中，经常需要在文档加载完成后执行一些初始化操作，例如根据下拉框的初始值显示或隐藏某些元素。然而，如果直接在 $(document).ready() 中绑定事件监听，可能会导致首次加载时，这些初始化操作没有被触发。本文将介绍两种方法来解决这个问题，确保在页面加载完成后，指定的函数能够立即执行。
方法一：手动触发函数
最直接的方法是在 $(document).ready() 中，除了绑定事件监听器之外，还手动调用一次需要初始化的函数。
jQuery( document ).ready( function( $ ) { // 绑定输入框的 keyup 事件 jQuery('.cx-ui-container input[type="text"]').on('keyup', function(e){ slug_and_hide(jQuery(this)); }); // 绑定下拉框的 change 事件 jQuery('.cx-ui-container select').on('change', function(e){ handle_select_change(jQuery(this)); }); // 首次加载时手动调用函数 slug_and_hide(jQuery('.cx-ui-container input[type="text"]')); handle_select_change(jQuery('.cx-ui-container select'));});function handle_select_change(obj) { var selectField = jQuery(obj); var selectedValue = selectField.val(); var textareaField = obj.parents('.cheryr-ui-repeater-content-box').find('textarea'); if (selectedValue !== "multiple-choice") { textareaField.css("display", "none"); } else { textareaField.val(""); textareaField.css("display", "block"); } }function slug_and_hide(obj){ var inputField = jQuery(obj).val(); let slug = inputField.toLowerCase().replace(/s+/g, '-'); slug = slug.replace(/[^a-z0-9-]/g, ''); slug = slug.replace(/^-+|-+$/g, ''); let inputSlug = jQuery(obj).parents('.cheryr-ui-repeater-content-box').find('.input-slug-wrap').find('input'); inputSlug.prop('readonly', true); inputSlug.val(slug); inputSlug.css("display", "block");}
优点：
简单易懂，易于实现。
缺点：
在某些情况下，可能会出现页面元素闪烁的问题，因为元素会先以默认状态显示，然后才被 JavaScript 代码修改。这取决于页面加载速度和 JavaScript 执行速度。
方法二：使用 CSS 类控制显示/隐藏
另一种更优雅的方法是使用 CSS 类来控制元素的显示和隐藏，而不是直接使用 JavaScript 修改 display 属性。
定义 CSS 类：
.hide { display: none;}
修改 JavaScript 代码：
jQuery( document ).ready( function( $ ) { jQuery('.cx-ui-container input[type="text"]').on('keyup', function(e){ slug_and_hide(jQuery(this)); }); jQuery('.cx-ui-container select').on('change', function(e){ handle_select_change(jQuery(this)); }); // 首次加载时触发 change 事件，初始化元素状态 jQuery('.cx-ui-container select').trigger('change');});function handle_select_change(obj) { var selectField = jQuery(obj); var selectedValue = selectField.val(); var textareaField = obj.parents('.cheryr-ui-repeater-content-box').find('textarea'); if (selectedValue !== "multiple-choice") { textareaField.addClass("hide"); } else { textareaField.removeClass("hide"); textareaField.val(""); } }function slug_and_hide(obj){ var inputField = jQuery(obj).val(); let slug = inputField.toLowerCase().replace(/s+/g, '-'); slug = slug.replace(/[^a-z0-9-]/g, ''); slug = slug.replace(/^-+|-+$/g, ''); let inputSlug = jQuery(obj).parents('.cheryr-ui-repeater-content-box').find('.input-slug-wrap').find('input'); inputSlug.prop('readonly', true); inputSlug.val(slug); inputSlug.removeClass("hide");}
在 HTML 中添加初始类：
在 HTML 中，为需要默认隐藏的元素添加 hide 类。例如：
优点：
避免页面元素闪烁的问题，因为元素在加载时就已经是隐藏状态。代码更简洁，可读性更高。更容易维护，因为 CSS 类可以被复用。
缺点：
需要修改 HTML 结构，添加初始类。
总结
本文介绍了两种在文档首次加载时调用多个函数的方法，并分析了各自的优缺点。
手动触发函数 简单易懂，但可能存在闪烁问题。使用 CSS 类控制显示/隐藏 更加优雅，可以避免闪烁问题，但需要修改 HTML 结构。
选择哪种方法取决于具体的应用场景。如果对页面加载速度要求不高，且可以接受元素闪烁，那么手动触发函数是一个简单有效的选择。如果对用户体验要求较高，希望避免元素闪烁，那么使用 CSS 类控制显示/隐藏是更好的选择。建议优先考虑使用 CSS 类的方法，因为它更符合现代 Web 开发的最佳实践。
以上就是在文档首次加载时调用多个函数的正确方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1518040.html
微信扫一扫 
支付宝扫一扫 
