如何在jQuery的document.ready函数中添加并传递参数？

你遇到的报错核心来自两个方面：一是现有jQuery代码存在基础语法错误，二是对$(document).ready的回调机制不熟悉，具体解决方法如下： #

1. 先修正现有代码的明显错误 #

• 你贴的toggleItem函数代码缺失末尾的闭合大括号，运行前需要先补上
• jQuery类选择器需要加.标识，$('btn-overlay')要改为$('.btn-overlay')，否则永远匹配不到对应元素
• 不要直接用attr('style')覆盖元素所有内联样式，推荐用jQuery内置的css()方法单独设置指定样式
• 现有逻辑中margin-top的设置代码在if判断外，不管条件是否成立都会执行，如果你需要判断分支走不同逻辑，要把这行放到else分支里

修正后的基础代码：

function toggleItem(el, el2, el3, el4, el5, el6) {
  var item1 = document.getElementById(el2);
  if (item1.style.display === "none") {
    item1.style.display ="flex";
  } else {
    item1.style.display ="none";
  }
}

$(document).ready(function() {
  if($('.btn-overlay').css("display") == "block") {
    $('.btn-mainbrand').css("margin-bottom", "30px");
  } 
  $('.btn-mainbrand').css("margin-top", "100px");
});

2. 给$(document).ready传参的正确方法 #

jQuery的$(document).ready回调是框架内置触发的，本身不支持直接传入自定义参数，可通过以下两种方式实现参数传递：

方式1：直接调用上层作用域的参数 #

如果你的参数/函数定义在ready函数的上层作用域（比如全局作用域），可以直接在回调内使用，不需要额外传参：

// 上层作用域定义的自定义参数
const customParams = {
  id1: 'test1',
  id2: 'test2'
}

$(document).ready(function() {
  // 直接调用即可
  toggleItem(customParams.id1, customParams.id2, '','','','')
})

方式2：通过闭包隔离作用域传参 #

如果需要避免全局变量污染，可以用立即执行函数把参数包裹传入：

// 要传入的自定义参数
const paramA = '参数1', paramB = '参数2'

(function(p1, p2){
  $(document).ready(function() {
    // 这里可以正常拿到传入的p1、p2参数
    console.log(p1, p2)
  })
})(paramA, paramB)

3. Laravel Livewire环境适配注意事项 #

Livewire组件局部更新时会重新渲染DOM，$(document).ready只会在页面首次加载时执行一次，组件刷新后逻辑会失效，需要额外监听Livewire的生命周期事件：

// 把公共逻辑抽成公共函数
function initPageLogic() {
  if($('.btn-overlay').css("display") == "block") {
    $('.btn-mainbrand').css("margin-bottom", "30px");
  } 
  $('.btn-mainbrand').css("margin-top", "100px");
}

// 页面首次加载执行
$(document).ready(initPageLogic)
// Livewire组件更新后执行（Livewire 2版本用这个）
document.addEventListener('livewire:load', initPageLogic)
// Livewire 3版本替换为下面的事件
// document.addEventListener('livewire:initialized', initPageLogic)

可选优化建议 #

你当前绑定点击事件需要硬编码传递6个ID参数，代码冗余度高，可以改用事件委托实现，不需要传ID：

$(document).on('click', '.btn-open-overlay', function() {
  // 通过DOM遍历直接获取关联元素
  const $card = $(this).closest('.card-mainbrand')
  const $mainbrandItem1 = $card.find('.btn-mainbrand')
  // 直接实现显示隐藏切换，不需要手动判断display属性
  $mainbrandItem1.toggle()
  // 其他关联元素的操作同理通过遍历获取即可
})

内容的提问来源于stack exchange，提问作者raka mahesa