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

Question

我已经制作了一个掷骰子器，实现了我在这里编写的代码。

我将它添加到wordpress functions.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}

JS:

$("#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()

为输入指定一个类';dicebutton ';代替。然后像这样添加事件处理程序:

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