的JavaScript未触发

Question

所以我来到这里的动画剧本的开头：

<div id="card5"> 
    <h4 class="y">Let me be your guide.</h4> 
    <h1>Here's what I've got:</h1> 

    <div id="a"> 
     <h4 id="aa">Creativity</h4> 
    </div> 

    <div id="b"> 
     <h4 id="bb">Know-how</h4> 
    </div> 

    <div id="c"> 
     <h4 id="cc">Familiarity</h4> 
    </div> 
</div> 

<script type="text/javascript"> 
    var aa = document.getElementById("aa"); 
    var bb = document.getElementById("bb"); 
    var cc = document.getElementById("cc"); 

    var aamargin = style.aa.marginTop | 30; 
    var bbmargin = style.bb.marginTop | 30; 
    var ccmargin = style.cc.marginTop | 30; 

    var a = document.getElementById("a"); 
    var b = document.getElementById("b"); 
    var c = document.getElementsByTagName("c"); 

    var aadown = true; 
    var bbdown = true; 
    var ccdown = true; 

    a.onmouseover = amove; 
    b.onmouseover = bmove; 
    c.onmouseover = cmove; 

    function amove() { 
     window.alert("Herro!"); 
     if (aadown) { 
      aaup(); 
      aadown = false; 
     } 
    } 

    function aaup() { 
     if (aamargin > 0) { 
      aamargin -= 1; 
      style.aa.marginTop = aamargin + "%"; 
      requestAnimationFrame(aaup); 
     } 
    } 
</script> 

当我将鼠标放在第一个div（“A”），当然，没有任何反应。我把一个警告框放进去看看amove（）函数是否被触发，而事实并非如此。警报从未解雇。不知道为什么。这可能只是一个错字某处...

Answer 1

的错误是在这里：

var aamargin = style.aa.marginTop | 30; 
var bbmargin = style.bb.marginTop | 30; 
var ccmargin = style.cc.marginTop | 30; 

我想你的意思aa.style而不是style.aa？

Answer 2

两个错误与style.aa.marginTop | 30;：

• |是位运算符，如果你想要的逻辑或，你需要||，像这样：style.aa.marginTop || 30;
• style没有定义，你需要aa.style，就像这样： aa.style.marginTop || 30;

最后一件事：bmove和cmove没有定义。

看到这里的补丁的例子：

<div id="card5"> 
 
    <h4 class="y">Let me be your guide.</h4> 
 
    <h1>Here's what I've got:</h1> 
 

 
    <div id="a"> 
 
     <h4 id="aa">Creativity</h4> 
 
    </div> 
 

 
    <div id="b"> 
 
     <h4 id="bb">Know-how</h4> 
 
    </div> 
 

 
    <div id="c"> 
 
     <h4 id="cc">Familiarity</h4> 
 
    </div> 
 
</div> 
 

 
<script type="text/javascript"> 
 
    var aa = document.getElementById("aa"); 
 
    var bb = document.getElementById("bb"); 
 
    var cc = document.getElementById("cc"); 
 

 
    var aamargin = aa.style.marginTop || 30; 
 
    var bbmargin = bb.style.marginTop || 30; 
 
    var ccmargin = cc.style.marginTop || 30; 
 

 
    var a = document.getElementById("a"); 
 
    var b = document.getElementById("b"); 
 
    var c = document.getElementsByTagName("c"); 
 

 
    var aadown = true; 
 
    var bbdown = true; 
 
    var ccdown = true; 
 

 
    bmove = cmove = amove; // just a quickfix 
 

 
    a.onmouseover = amove; 
 
    b.onmouseover = bmove; 
 
    c.onmouseover = cmove; 
 
    
 
    
 

 
    function amove() { 
 
     window.alert("Herro!"); 
 
     if (aadown) { 
 
      aaup(); 
 
      aadown = false; 
 
     } 
 
    } 
 

 
    function aaup() { 
 
     if (aamargin > 0) { 
 
      aamargin -= 1; 
 
      aa.style.marginTop = aamargin + "%"; 
 
      requestAnimationFrame(aaup); 
 
     } 
 
    } 
 
</script>