为何JavaScript脚本在某WordPress页面失效，另一页面正常？

我开发了一个骰子滚轮功能，代码实现后加到WordPress的functions.php短代码函数中，原本运行正常，但现在发现一个页面（滚动至底部）功能正常，另一个页面完全无法运行，求排查方向。

排查思路 #

• 检查jQuery加载状态：JS代码使用了jQuery语法，确认失效页面是否正确加载jQuery，且加载顺序在自定义JS之前。WordPress部分页面可能因主题/插件设置未加载jQuery，或加载时机晚于你的代码。
• 排查ID冲突：代码中使用了#dicebutton、#dicesvg这类ID选择器，若失效页面存在重复ID元素，会导致JS无法正确定位目标元素。查看页面源码确认ID唯一性。
• 短代码重复调用问题：若同一页面多次调用该短代码，重复ID会引发功能异常，建议将ID改为类名，或为每个短代码实例生成唯一标识。
• 样式冲突检查：用浏览器开发者工具查看失效页面中，动画相关类（如.dicetransform-active、.dicetexttransform1-active）的样式是否被主题或其他插件的CSS覆盖。
• 确认JS执行时机：确保自定义JS在DOM完全渲染后执行。WordPress中建议将JS挂载到wp_footer钩子，或用$(document).ready()包裹代码，避免DOM未加载完成时执行JS导致元素找不到。
• 查看控制台错误：打开浏览器开发者工具（F12）的Console面板，查看失效页面是否有报错信息（如$ is not defined、Cannot set property 'textContent' of null），错误信息会直接指向问题根源。
• 清理缓存：WordPress缓存插件或浏览器缓存可能导致旧代码未更新，清理缓存后重新测试。

相关代码 #

HTML #

<div class="dicerollingwrapper">
  <div class="dicebox dicetransform">
    <svg id="dicesvg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
      <style> .dicetextsecond {font: 70px serif; fill: white; fill-opacity:0;} 
      .dicetextfirst {font: 70px serif; fill: white;}    
      </style>
    <path class="dicetospin"  d="M38.8,-69C44.4,-64,38.9,-41.6,40.7,-27.2C42.6,-12.8,51.8,-6.4,52.6,0.5C53.4,7.3,45.7,14.6,39,20.7C32.3,26.7,26.6,31.5,20.3,38.2C14,45,7,53.6,0.2,53.2C-6.5,52.9,-13.1,43.4,-21.5,37.9C-30,32.4,-40.4,30.9,-45.6,25.2C-50.8,19.6,-50.9,9.8,-48.4,1.4C-45.8,-6.9,-40.8,-13.8,-37.7,-23C-34.5,-32.2,-33.2,-43.8,-27.3,-48.5C-21.3,-53.3,-10.7,-51.2,3,-56.4C16.6,-61.6,33.2,-73.9,38.8,-69Z" transform="translate(100,100)" />
      <text x="50%" y ="60%" text-anchor="middle" class="dicetextsecond">13</text>
      <text x="50%" y ="60%" text-anchor="middle" class="dicetextfirst">?</text> 
      
  </svg>
</div>

CSS #

.dicebox {
  /* background-color: #ff8D9B; */
  height: 300px;
  width: 300px;
}

.dicetransform {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}

.dicetransform-active {
  animation-name: rotate;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

@keyframes rotate {
  100% {transform:rotate(4320deg); }
} 

.dicetexttransform {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}

.dicetexttransform1-active {
  animation: hidecolor 4s forwards;
}

@keyframes hidecolor {
  0% { fill: white; }
  100% {fill-opacity:0;}
}

.dicetexttransform2-active {
  animation: showcolor 4s forwards;
}

@keyframes showcolor {
  0% {fill-opacity:0;}
  100% {fill-opacity:1;fill: white;}
}

#dicebutton {width:300px; height:50px; background-color:#ff8888; font-size: 24px; border:none; border-radius: 15px;transition-duration: 0.4s; font-weight:bold;}
#dicebutton:hover {background-color:#000; color:#ff8888}

JavaScript #

$("#dicebutton").click(function() {
$('.dicetransform').toggleClass('dicetransform-active'); 

  // 生成随机数
  let x = Math.floor((Math.random() * 13) + 1);
  // 查找SVG元素
  var numberdiceSVG = document.querySelector('#dicesvg .dicetextsecond');
  var hidediceSVG = document.querySelector('#dicesvg .dicetextfirst');
  // 设置数字
  numberdiceSVG.textContent = x;
  // 若已完成动画则重置
  if(numberdiceSVG.getAttribute('class') === "dicetextsecond dicetexttransform dicetexttransform2-active") {
    numberdiceSVG.setAttribute('class', 'dicetextsecond dicetexttransform');
    hidediceSVG.setAttribute('class', 'dicetextfirst dicetexttransform');
  }
  else {
    hidediceSVG.setAttribute('class', 'dicetextfirst dicetexttransform dicetexttransform1-active');

numberdiceSVG.setAttribute('class', 'dicetextsecond dicetexttransform dicetexttransform2-active');
  }
  
var hidediceSVG = document.querySelector('#dicesvg .dicetextfirst');

  });

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