如何在jQuery中添加内联样式？我的点击事件代码为何无法生效？

• 变量未正确获取DOM元素
  确保modalClose和modalContainer是通过jQuery选择器正确选中的目标元素，比如：

  const modalClose = $(".modal-close"); // 或对应ID选择器$("#modal-close")
  const modalContainer = $(".modal-container");
  

  如果变量未指向真实存在的DOM元素，事件绑定自然不会生效。

• 事件绑定时机错误
  代码必须在DOM完全加载完成后执行，否则目标元素还未渲染，无法完成事件绑定。可以把代码包裹在$(document).ready()中：

  $(document).ready(function() {
    const modalClose = $(".modal-close");
    const modalContainer = $(".modal-container");
    
    modalClose.on("click", function() {
      modalContainer.removeClass("modal-open");
      modalContainer.hide();
    });
  });
  

• 箭头函数的潜在隐患
  你使用箭头函数作为事件处理函数，虽然当前代码没用到this，但如果后续需要引用触发事件的元素（比如$(this)），箭头函数的this指向会不符合预期，换成普通函数更稳妥。

• style属性覆盖问题
  用attr("style", "display:none")会清空元素所有行内样式，建议改用modalContainer.hide()或者modalContainer.css("display", "none")，这样只会修改display属性，保留其他行内样式。

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