Как передать динамический html div id в функцию js

Я хочу передать div id из html в сценарий js динамически , так как такой div id r1, r2, r3 должен быть передан в getElementById() в jS, поэтому, когда пользовательская мышь над любым 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

U хотите установить идентификатор, используя javascript – Transformer

@Transformer yes ... но он не работает, что я на самом деле хочу сделать с вашими исправлениями. –

Отредактированный мой ответ


 
<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 is 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

ответ

Смежные вопросы