反向表单元素上使用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

回答

相关问题