为什么 javascript 脚本没有在一个 wordpress 页面上运行，但在另一个页面上运行良好？

Question

我做了一个掷骰子，实现了我在这里写的代码。

我将它添加到 wordpress 函数中的快捷方式 function.php，一切正常。 刚刚再次检查，它在一页上运行良好（滚动到底部） ，但在另一页上却不行，我不知道为什么！

有什么想法吗？

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}

记者：

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

  // generate random
  let x = Math.floor((Math.random() * 13) + 1);
  //find SVG elements
  var numberdiceSVG = document.querySelector('#dicesvg .dicetextsecond');
  var hidediceSVG = document.querySelector('#dicesvg .dicetextfirst');
  //set number
  numberdiceSVG.textContent = x;
  // reset if animated already done
  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');

  });

Answer 1

在您的第二页上，您在页面上有两次具有相同 id 的相同元素：

<input type="button" id="dicebutton" value="Roll a d13!"></input>

两者具有相同的 ID： dicebutton 。

HTML id 属性用于指定 HTML 元素的唯一 ID。

在一份 HTML 文档中，不能有多个具有相同 ID 的元素。

如果您希望在页面上多次输入，请为每个输入使用不同的 ID：例如： dicebutton1和dicebutton2 ，然后添加事件处理程序：

$("#dicebutton1, #dicebutton2").click(function()

为输入分配一个 class “dicebutton”。 并像这样添加事件处理程序：

$(".dicebutton1").click(function()