反向表單元素上使用jQuery

我在十六進制的工作爲十進制的顏色代碼轉換器鼠標點擊的位置。我希望通過點擊一個按鈕來改變表單元素的位置。反向表單元素上使用jQuery

即當我點擊六至慈按鈕，帶十六進制代碼必須出現在左邊和形式時，我德西至六按鈕，帶十進制代碼必須首先出現的形式。

HTML代碼：

<!DOCTYPE html> 
    <head> 
     <title>my color converter</title>  
    </head> 
    <body> 
     <h3>TOGGLE COLOR REPRESENTATION</h3> 

     <div class="align text-center"> 
      <button class="btn btn-default button1">HEXA TO DECI</button> 
      <button class="btn btn-default button2">DECI TO HEXA</button> 
     </div> 

     <div class="row"> 
      <div class="col-md-6 column1"> 
       <form> 
        <div class="form-group colorcode1"> 
         <label for="hex2decimal" class="class1"><p>COLOR IN DECIMAL CODE</p></label> 
        <input type="colorcode" class="form-control .class2" id="colorcode1" placeholder="decimal code"> 
        </div> 
       </form> 
      </div> 
      <div class="col-md-6"> 
       <form> 
        <div class="form-group colorcode2"> 
         <label for="hex2decimal" class="class3"><p>COLOR IN HEXADECIMAL CODE</p></label> 
         <input type="colorcode" class="form-control class4" id="colorcode2" placeholder="hex code"> 
        </div> 
       </form> 
      </div> 
     </div> 

     <div class="align text-center"> 
      <button class="btn btn-default button3">CONVERT</button> 
      <button class="btn btn-default button4">REFRESH</button> 
     </div> 
    </body>

CSS代碼：

.form-group { 
margin-top: 60px; 
width:80%; 
margin-left:8.33333333%; 
text-align: center; 
    } 

h3 { 
    text-align:center; 
    margin-top:40px; 
    } 

.align { 
    margin-top:40px; 
    }

JavaScript的：

$(document).ready(function(){ 
$(".button1").on('click',function(){ 
    var form1 = $('.colorcode1').detach(); 
     form1.appendTo('form'); 
            }); 
          });

注：我正在學習jQuery和我已經包括CDN。

來源

2016-03-16 RRR

這可能是，而不是試圖複製包含答案的形式，只是填充在相反的表單字段的答案比較好，？ Google翻譯的方式只是在對面的框中推送翻譯的答案。 –

看到工作代碼here。您的JavaScript將如下： codepan

$(document).ready(function() { 
    $(".button1").on('click', function() { 
    var form1 = $('.colorcode1'); 
    var form2 = $('.colorcode2'); 
    jQuery(form1) 
     .detach() 
     .appendTo('#hax'); 
     jQuery(form2) 
     .detach() 
     .appendTo('#dec'); 
    }); 
    $(".button2").on('click', function() { 
    var form1 = $('.colorcode1'); 
    var form2 = $('.colorcode2'); 
    jQuery(form1) 
     .detach() 
     .appendTo('#dec'); 
     jQuery(form2) 
     .detach() 
     .appendTo('#hax'); 
    }); 
});

HTML：

<h3>TOGGLE COLOR REPRESENTATION</h3> 

<div class="align text-center"> 
    <button class="btn btn-default button1">HEXA TO DECI</button> 
    <button class="btn btn-default button2">DECI TO HEXA</button> 
</div> 

<div class="row"> 
    <div class="col-md-6 column1"> 
    <form id="dec"> 
     <div class="form-group colorcode1"> 
     <label for="hex2decimal" class="class1"> 
      <p>COLOR IN DECIMAL CODE</p> 
     </label> 
     <input type="colorcode" class="form-control .class2" id="colorcode1" placeholder="decimal code"> 
     </div> 
    </form> 
    </div> 
    <div class="col-md-6"> 
    <form id="hax"> 
     <div class="form-group colorcode2"> 
     <label for="hex2decimal" class="class3"> 
      <p>COLOR IN HEXADECIMAL CODE</p> 
     </label> 
     <input type="colorcode" class="form-control class4" id="colorcode2" placeholder="hex code"> 
     </div> 
    </form> 
    </div> 
</div> 

<div class="align text-center"> 
    <button class="btn btn-default button3">CONVERT</button> 
    <button class="btn btn-default button4">REFRESH</button> 
</div>

來源

2016-03-16 12:00:47

感謝您的解決方案。我只是在學習jQuery，請問爲什麼使用它？ form1.appendTo（ '＃'）; – RRR

@RakshithBellare：這是錯誤的。我已刪除並更新了答案 –

我將此添加到您的風格：

.column1 { 
    float: right; 
}

，然後改變這樣的JS：

$(document).ready(function() { 
    $(".button1").on('click', function() { 
    $('.colorcode1').parents('div:first').toggleClass('column1'); 
    $('.colorcode2').parents('div:first').toggleClass('column1'); 
    }); 
});

雖然我會稱其他類不是column1。

來源

2016-03-16 12:25:21

反向表單元素上使用jQuery

回答

相關問題