एचटीएमएल डीवी आईडी को गतिशील रूप से जेएस फ़ंक्शन

पर ले जाने के लिए कैसे करें I div से html को js स्क्रिप्ट को गतिशील रूप से पर पास करना चाहते हैं क्योंकि div div r1, r2, r3 को getElementById() में जेएस में पारित करने की आवश्यकता है, इसलिए जब किसी भी div पर उपयोगकर्ता माउस, यह स्वचालित रूप से घूर्णन हो जाएगा।एचटीएमएल डीवी आईडी को गतिशील रूप से जेएस फ़ंक्शन

यह मेरा पहला प्रश्न है, यदि कोई सुधार सुझाया गया है तो आपका स्वागत है!

<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

यू जावास्क्रिप्ट – 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

मैंने इसका उपयोग करने की कोशिश की लेकिन यह पहले की तुलना में अन्य सभी टीडी आईडी छुपाता है। –

मेरा जवाब संपादित –

ग्रेट !! धन्यवाद .. यह काम करता है..लेकिन केवल एक और बात..क्या हम फिर से माउस का उपयोग करते समय उसी तरह उलटा कर सकते हैं..और इसे हर माउस पर दोहराएं !! –

आप कई त्रुटियाँ इस

 <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

आपके समाधान काम करने लगते हैं, लेकिन यह आईडी को पास नहीं करता है क्योंकि rota (i) function.it में पैरामीटर मुझे बुद्धिमान "x शून्य है" –

है जैसे कि यह कोशिश की है आप भी इस तरह से कोशिश कर सकते हैं -

<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

एचटीएमएल डीवी आईडी को गतिशील रूप से जेएस फ़ंक्शन

उत्तर

संबंधित मुद्दे