html屬性內的JS函數 - 全部通過php回顯。錯誤地轉義？

我想運行一個javascript函數內部的html onmouseover屬性來交換圖片。照片全部顯示，但是鼠標懸停不起作用;我想我逃過了錯誤的方式（瀏覽器顯示>），但我找不到錯在哪裏 A BIG非常感謝您的幫助！html屬性內的JS函數 - 全部通過php回顯。錯誤地轉義？

某些代碼：

... 
<?php  
      echo "<img src=\"$main_img_small\" alt=\"\" onmouseover=\"<script language=\"JavaScript\" type=\"text/javascript\" src=\"mouseover.js\"></script><script type=\"text/javascript\">swapImage(0);</script>\">"; 
        echo "<img src=\"$var1_small\" alt=\"\" onmouseover=\"<script language=\"JavaScript\" type=\"text/javascript\" src=\"mouseover.js\"></script><script type=\"text/javascript\">swapImage(1);</script>\">"; 
        echo "<img src=\"$var2_small\" alt=\"\" onmouseover=\"<script language=\"JavaScript\" type=\"text/javascript\" src=\"mouseover.js\"></script><script type=\"text/javascript\">swapImage(2);</script>\">"; 
    ?> 
...

mouseover.js（存儲在同一文件夾中）：

 var phpvar1_large = <?php echo json_encode($var1_large); ?>; 
     var phpvar2_large = <?php echo json_encode($var2_large); ?>; 
     var phpvar3_large = <?php echo json_encode($var3_large); ?>; 
     var phpvar4_large = <?php echo json_encode($var4_large); ?>; 

     if(!phpvar1_large){ 
     var imgArray = new Array(
      '<?=$main_img; ?>' 
      ); 
     }else if(!phpvar2_large){ 
      var imgArray = new Array(
      '<?=$main_img; ?>', 
      '<?=$var1_large; ?>' 
      ); 
     }else if(!phpvar3_large){ 
     var imgArray = new Array(
      '<?=$main_img; ?>', 
      '<?=$var1_large; ?>', 
      '<?=$var2_large; ?>', 
      '<?=$var3_large; ?>' 
      ); 
     }else if(!phpvar4_large){ 
      var imgArray = new Array(
      '<?=$main_img; ?>', 
      '<?=$var1_large; ?>', 
      '<?=$var2_large; ?>', 
      '<?=$var3_large; ?>' 
      ); 
     }else if(phpvar4_large){ 
     var imgArray = new Array(
      '<?=$main_img; ?>', 
      '<?=$var1_large; ?>', 
      '<?=$var2_large; ?>', 
      '<?=$var3_large; ?>', 
      '<?=$var4_large; ?>' 
     ); 
     } 


     function swapImage(imgID) { 
      var theImage = document.getElementById('theImage'); 
      var newImg; 
      newImg = imgArray[imgID]; 
      theImage.src = newImg; 
     } 

     function preloadImages() {  
      for(var i = 0; i < imgArray.length; i++) { 
       var tmpImg = new Image; 
       tmpImg.src = imgArray[i]; 
      } 
     }

瀏覽器輸出：

... 
<div id="image"> 
      <img id="theImage" src="http://ecx.images-amazon.com/images/I/41ioC67AdgL.jpg" alt="" /> 
     </div> 

     <div id="thumbs"> 
      <img src="http://ecx.images-amazon.com/images/I/41ioC67AdgL._SL75_.jpg" alt="" onmouseover="<script language="JavaScript" type="text/javascript" src="mouseover.js"></script><script type="text/javascript">swapImage(0);</script>"><img src="http://ecx.images-amazon.com/images/I/41Yrx4v10TL._SL75_.jpg" alt="" onmouseover="<script language="JavaScript" type="text/javascript" src="mouseover.js"></script><script type="text/javascript">swapImage(1);</script>"><img src="http://ecx.images-amazon.com/images/I/41bzT-hN9mL._SL75_.jpg" alt="" onmouseover="<script language="JavaScript" type="text/javascript" src="mouseover.js"></script><script type="text/javascript">swapImage(2);</script>"> 

      <br /> 
     </div> 

...

因此，在小圖片的右側，您會看到「>

注意：如果您想知道，我最終會嘗試在wordpress頁面上運行此操作，這就是爲什麼javascript命令看起來像這樣（看到這裏：http://codex.wordpress.org/Using_Javascript）

來源

2012-10-26 Franc

不幸的是，你誤解了Codex的東西。腳本標記不用於內聯腳本調用。由於腳本標記是標準的html標記，因此不能將它們填充到另一個html標記的屬性中。它還會說：

...您可以在header.php模板文件的頭部，元標記和樣式錶鏈接之間設置JavaScript或腳本本身的調用。 ..

所以你mouseover.js文件應在<head>或關閉標籤</body>之前被鏈接。運行內嵌JavaScript不在您鏈接的Codex的條目中。

要修復您的代碼，您必須將第一個腳本標記放入<head>，並將函數調用放入內嵌javascript調用（onmouseover="..."）。您的代碼看起來像這樣：

<!-- This should be in your head-tag: --> 
<script language="javascript" type="text/javascript" src="mouseover.js"></script> 

... 
<div id="thumbs"> 
    <img src="http://ecx.images-amazon.com/images/I/41ioC67AdgL._SL75_.jpg" alt="" onmouseover="javascript:swapImage(0);"> 
    <img src="http://ecx.images-amazon.com/images/I/41Yrx4v10TL._SL75_.jpg" alt="" onmouseover="javascript:swapImage(1);"> 
    <img src="http://ecx.images-amazon.com/images/I/41bzT-hN9mL._SL75_.jpg" alt="" onmouseover="javascript:swapImage(2);"> 
</div>

不過，我會建議您瞭解JavaScript的事件監聽器或嘗試jQuery的添加鼠標懸停函數特定HTML元素。內聯JavaScript（onmouseover=""等）混淆了您的HTML。

來源

2012-10-26 08:39:41 martinczerwi

html屬性內的JS函數 - 全部通過php回顯。錯誤地轉義？

回答

相關問題