AEM富文本组件中按钮控制Div显隐功能失效求助

问题概述 #

需求为：设置两个按钮与两个Div，默认状态下两个Div均隐藏；点击按钮一，显示Div二并隐藏Div一；点击按钮二，显示Div一并隐藏Div二。目前页面加载时Div默认隐藏正常，但按钮点击后无切换反应，代码在AEM富文本组件中编辑。

已尝试的代码 #

JavaScript代码 #

$(document).ready(function() {
  $("#button-one").click(function() {
    $("#div-one").hide();
    $("#div-two").show();
  });
});

$(document).ready(function() {
  $("#button-two").click(function() {
    $("#div-one").show();
    $("#div-two").hide();
  });
});

还尝试过以下写法：

• $('#sdfsdfs').css('display', 'block')
• document.getElementById("fsdfsdf").style.display="block";

HTML代码 #

<div class="buttonOne">
  <button id="button-one" value="button one"> Button One </button>
</div>
<div class="buttonTwo">
  <button id="button-two" value="button two"> Button Two </button>
</div>
<div class="divOne" id="div-one" style="display: none;">
Some HTML
</div>
<div class="divTwo" id="div-two" style="display: none;">
Some HTML
</div>
</div>
</div>

排查方向与解决方案 #

• jQuery依赖问题
  AEM页面可能未引入jQuery，或引入顺序晚于你的脚本，导致$未定义。建议改用原生JavaScript实现，避免依赖：

  document.addEventListener('DOMContentLoaded', function() {
    const btnOne = document.getElementById('button-one');
    const btnTwo = document.getElementById('button-two');
    const divOne = document.getElementById('div-one');
    const divTwo = document.getElementById('div-two');
  
    btnOne.addEventListener('click', () => {
      divOne.style.display = 'none';
      divTwo.style.display = 'block';
    });
  
    btnTwo.addEventListener('click', () => {
      divOne.style.display = 'block';
      divTwo.style.display = 'none';
    });
  });
  

• AEM富文本的脚本过滤
  AEM富文本组件通常会自动过滤<script>标签或内嵌脚本，导致代码无法执行。建议将JavaScript代码移至页面的**客户端库（Client Library）**中，而非直接写入富文本。

• 元素ID冲突
  检查页面全局是否存在重复的button-one、button-two、div-one、div-two ID，重复ID会导致选择器失效。

• DOM结构错误
  提供的HTML片段末尾存在多余的</div>标签，可能导致DOM结构异常。修复标签闭合问题，确保HTML结构合法。

• 动态元素的事件绑定
  若AEM组件为异步渲染，DOMContentLoaded可能早于元素加载完成。可使用事件委托确保事件触发：

  document.addEventListener('click', function(e) {
    const divOne = document.getElementById('div-one');
    const divTwo = document.getElementById('div-two');
    
    if (e.target.id === 'button-one') {
      divOne.style.display = 'none';
      divTwo.style.display = 'block';
    } else if (e.target.id === 'button-two') {
      divOne.style.display = 'block';
      divTwo.style.display = 'none';
    }
  });
  

验证建议 #

1. 打开浏览器开发者工具（F12），查看Console标签是否存在报错（如$ is not defined），快速定位问题根源。
2. 先测试原生JS代码，排除jQuery依赖问题。
3. 确认脚本未被AEM过滤，优先使用客户端库托管脚本。

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