Question

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

，当我点击hexa到deci按钮时，左边会出现带十六进制代码的表格，当我决定使用十六进制按钮时，必须首先出现带十进制代码的表格。

HTML CODE：

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

Answer 1

查看工作代码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>

Answer 2

我将此添加到您的风格中：

.column1 {
  float: right;
}

然后像这样改变了js：

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

但是我会把这个类称为除了column1以外的其他东西。

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

2 个答案: