如何將html div id的動態傳遞給js函數

我想將div id從html動態傳遞給js腳本因爲div id r1，r2，r3需要傳入jS中的getElementById()，所以當用戶鼠標放在任何div上，它會自動旋轉。如何將html div id的動態傳遞給js函數

這是我的第一個問題，如果有任何更正建議，歡迎！

<tbody> 
      <tr> 
     <td id="r1"> Roboust</td> 
     <td id="r2">Dynamic</td> 
     <td id="r3">Adhere</td> 

     </tr> 
     <tr> 
     <td id="r4">Popular</td> 
     <td id="r5">Trending</td> 
     <td id="r6">Favourite</td> 
     </tr> 
     <tr> 
     <td id="r7">Famous</td> 
     <td id="r8">Blockbouster</td> 
     <td id="r9">Navie</td> 
     </tr> 
     </tbody> 
    </table> 
<h1>CLICK ON BUTTONS TO ROTATE THE BUTTON AS YOU WANT THEM</h1> 
<button onclick="rotate() ">Flip Row1</button> 

<script> 

var rotate = function() { 
document.getElementById('r1').style="transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d"; 
} 
</script> 
</body>

來源

2016-02-23 Prasad_Joshi

ü想使用javascript設置id – Transformer

@Transformer是的......但它不起作用，我實際上想要對您的更正做什麼。 –

編輯我的回答


 
<html> 
 
<body> 
 
    <table> 
 
     <tbody> 
 
      <tr> 
 
       <td id="r1" onmouseover="rotate(this)"> Roboust</td> 
 
       <td id="r2" onmouseover="rotate(this)">Dynamic</td> 
 
       <td id="r3" onmouseover="rotate(this)">Adhere</td> 
 
      </tr> 
 
      <tr> 
 
       <td id="r4" onmouseover="rotate(this)">Popular</td> 
 
       <td id="r5" onmouseover="rotate(this)">Trending</td> 
 
       <td id="r6" onmouseover="rotate(this)">Favourite</td> 
 
      </tr> 
 
      <tr> 
 
       <td id="r7" onmouseover="rotate(this)">Famous</td> 
 
       <td id="r8" onmouseover="rotate(this)">Blockbouster</td> 
 
       <td id="r9" onmouseover="rotate(this)">Navie</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 

 
<script> 
 
    var rotate = function(x) { 
 
     if(x.className == "rotated"){ 
 
      x.style="transform:rotateX(0deg);transition: 0.6s;transform-style:preserve-3d"; 
 
      x.className = ""; 
 
     } 
 
     else{ 
 
      x.style="transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d"; 
 
      x.className = "rotated"; 
 
     } 
 
    } 
 
</script> 
 
</body> 
 
</html>

來源

2016-02-23 08:51:51

我試着用這個，但它隱藏了除第一個以外的所有其他td id。 –

編輯我的回答 –

太棒了！謝謝..那種工作..但只有一件事..我們可以反過來再次使用鼠標..並重復這個每個鼠標過了！ –

你有幾個錯誤嘗試這樣

 <table> 
       <tr> 
      <td id="r1" onmouseover="rota(r1)"> Roboust</td> 
      <td id="r2" onmouseover="rota(r2)">Dynamic</td> 
      <td id="r3" onmouseover="rota(r3)">Adhere</td> 
      </tr> 

     </table> 



     <script> 

     function rota(i) { 
     var x = document.getElementById(i); 
     x.style.transform="rotateX(180deg)"; 
     x.style.transition='0.6s'; 
     } 
     </script> 
     </body>

來源

2016-02-23 08:53:29 mohade

你的解決方案似乎工作，但它不會傳遞id作爲rota（i）function.it中的參數給我一個錯誤，如明智的「x是null」 –

您也可以嘗試這種方式 -

<table id="myTable"> 
    <tbody> 
     <tr> 
      <td id="r1"> Roboust</td> 
      <td id="r2">Dynamic</td> 
      <td id="r3">Adhere</td> 

     </tr> 
     <tr> 
      <td id="r4">Popular</td> 
      <td id="r5">Trending</td> 
      <td id="r6">Favourite</td> 
     </tr> 
     <tr> 
      <td id="r7">Famous</td> 
      <td id="r8">Blockbouster</td> 
      <td id="r9">Navie</td> 
     </tr> 
    </tbody> 
</table> 

<script> 
    document.getElementById('myTable').onmouseover = function(event) { 
     if (event.target.tagName.toUpperCase() == "TD") { 
      event.target.style = "transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d"; 
     } 
    } 
</script>

來源

2016-02-23 09:49:20 jaibatrik

如何將html div id的動態傳遞給js函數

回答

相關問題