使用 Jquery 在鼠标单击时反转表单元素的位置

Reverse the position of form elements on a mouse click using Jquery

本文关键字：表单 元素 位置 Jquery 鼠标 单击 使用      更新时间：2023-09-26

我正在研究十六进制到十进制的颜色代码转换器。我希望在单击按钮时更改表单元素的位置。

即，当我单击十六进制到十六进制按钮时，采用十六进制代码的表单必须出现在左侧，当我单击十六进制到十六进制

按钮时，必须首先出现采用十进制代码的表单。

我在 Codepen 的工作

网页代码 ：

<!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。

我把它

添加到你的风格中：

.column1 {
  float: right;
}

然后像这样更改 JS：

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

不过，我会称该类为第 1 列以外的其他类。

在此处查看工作代码。 你的JavaScript将如下所示：代码潘

$(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>
相关文章：